![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
threeJs
#麻辣小龙虾#
路漫漫其修远兮,吾将上下而求索。
展开
-
vue基于threejs实现的3D可视化编辑器
随着5G网络的渐渐普及,物联网在人们的生活中渐渐广泛使用,社会向着越来越智能化的方向发展。当康科技经过不懈努力,研发属于自己的一款3D可视化编辑器,助力企业应用实现3D可视化服务。......原创 2022-07-16 13:47:44 · 8521 阅读 · 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 · 692 阅读 · 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 · 2653 阅读 · 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 · 3883 阅读 · 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 · 1107 阅读 · 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 · 6550 阅读 · 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 · 8431 阅读 · 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 · 7631 阅读 · 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 · 5543 阅读 · 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 · 814 阅读 · 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 · 6263 阅读 · 1 评论 -
初探threeJs,进入web3D的世界。
最近开始看了webGL的一些知识,了解了相关的计算机图形基础知识,突然发现这些知识和之前大学学过得3Dmax有很多共性的地方,比如场景,模型、材质、灯光、摄像机等等。突然发现之前自己学的东西并不是全部没用,理解起来也有一定帮帮助。运行结果:代码如下:let i = 0;function init() { // create a scene, that will hold...原创 2019-03-28 16:31:13 · 1154 阅读 · 0 评论