threeJs
关注
分享
扫一扫
#麻辣小龙虾#
路漫漫其修远兮，吾将上下而求索。
展开
-
vue基于threejs实现的3D可视化编辑器
随着5G网络的渐渐普及，物联网在人们的生活中渐渐广泛使用，社会向着越来越智能化的方向发展。当康科技经过不懈努力，研发属于自己的一款3D可视化编辑器，助力企业应用实现3D可视化服务。......原创 2022-07-16 13:47:44 · 9615 阅读 · 10 评论 -
threejs + vue 倒入ade文件实现动画效果
threejs + vue 倒入ade文件实现动画效果<template><div class="modelsBox"> <div class="modelsBox_wrapper"></div> <div class="opara-pannel"> <div> <button @click="save">保存</button> <button @cl.原创 2022-05-20 16:47:05 · 749 阅读 · 0 评论 -
vue + threejs 实现场景环境贴图，模型高光显示效果
<template> <div class="modelsBox"> <div class="modelsBox_wrapper"></div> <div class="opara-pannel"> <div> </div> <div> 三维坐标点信息 <!-- <p>{{point3d}}<...原创 2022-05-19 14:44:40 · 2791 阅读 · 0 评论 -
vue + threejs实现导入blender动画并控制其播放
<template><div class="modelsBox"> <div class="modelsBox_wrapper"></div> <div class="opara-pannel" @click.stop> <div> <button @click="playAnimate(idx)" v-for="(v, idx) in this.animations" :key="i...原创 2022-04-28 15:06:51 · 4215 阅读 · 5 评论 -
vue+threejs 精灵模型Sprite模拟下雨效果
<template><div class="rain-box_wrapper"> <div class="modelsBox_wrapper"></div></div></template><script>import { webglOBJ } from '@/utils/webGL/webGL.js';import TWEEN from '@tweenjs/tween.js';export defa.原创 2022-04-27 18:20:51 · 1176 阅读 · 0 评论 -
vue+threejs 实现鼠标点击三维空间的模型点，相机平滑聚焦到对应的模型。
<template><div class="modelsBox"> <div class="modelsBox_wrapper" v-if="f"></div> <div :id="`sign${idx + 1}`" style="position: absolute;" v-for="(v, idx) in labels" :key="idx"> <div class="sign" :uuid="v.uuid"...原创 2022-04-25 15:47:36 · 7022 阅读 · 4 评论 -
vue + threejs 给3D模型添加label标签（dom的方式）
webGL.js封装的代码。const THREE = window.THREE;// webGL对象配置export const webglOBJ = { renderDom: null, Scene: null, // 场景 camera: null, // 摄像头 renderer: null, // 渲染器 senceAdd (objList = []) { objList.forEach(v => { webglOBJ.Scene...原创 2022-04-18 17:13:43 · 9107 阅读 · 21 评论 -
threejs使用精灵Sprite模型给场景3D模型打标签实例
精灵图Sprite效果是不管场景如何旋转，标签总是对着屏幕，可以用作对模型打标记，显示模型信息作用代码如下：<template> <div class="search"> <el-select v-model="input" filterable clearable placeholder="请输入项目名" @change="change"> <el-option v-for="(item, index) in ..原创 2020-11-03 17:05:18 · 7977 阅读 · 3 评论 -
threejs加载C4D模型及材质渲染实例
最近在学习Threejs3D引擎使用，主要是为了实现web里面去实现3D模型的加载渲染，这样会比较直观的看到类似的效果，增加用户体验。第一步：加载C4D模型。将模型和材质导出二、加载主要插件模块<scripttype="text/javascript"charset="UTF-8"src="./libs/three/loaders/MTLLoader.js"></script><scripttype="text/javascript"charset...原创 2020-10-09 18:01:24 · 5846 阅读 · 1 评论 -
threejs 灯光投影模型渲染demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></scr...原创 2020-09-29 10:20:58 · 854 阅读 · 0 评论 -
ThreeJs 导入外部三维模型，并实现鼠标滚动放大缩小旋转效果
let i = 0;function init() { // create a scene, that will hold all our elements such as objects, cameras and lights. var scene = new THREE.Scene(); // create a camera, which defines whe...原创 2019-03-29 11:33:24 · 6516 阅读 · 1 评论 -
初探threeJs，进入web3D的世界。
最近开始看了webGL的一些知识，了解了相关的计算机图形基础知识，突然发现这些知识和之前大学学过得3Dmax有很多共性的地方，比如场景，模型、材质、灯光、摄像机等等。突然发现之前自己学的东西并不是全部没用，理解起来也有一定帮帮助。运行结果：代码如下：let i = 0;function init() { // create a scene, that will hold...原创 2019-03-28 16:31:13 · 1211 阅读 · 0 评论