javascript 3d网页 示例 ( three.js 初探 七)
2024-08-28 03:24:20
1 完整代码下载
https://pan.baidu.com/s/1JJyVcP2KqXsd5G6eaYpgHQ
提取码 3fzt (压缩包名: 2020-4-5-demo.zip)
2 图片展示
3 主要代码
"use strict" class InitControl{ constructor(View, Three){ this.view = View; this.three = Three; this.target = {object: null, isDown: false, isMove: false}; this.dragTarget = {}; this.group = this.add(new THREE.Group(), null, true); this.setDrag(Three.scene, Three.camera, Three.renderer, this.group.children); this.setOrbit(Three.scene, Three.camera, Three.renderer); this.setTransform(Three.scene, Three.camera, Three.renderer); this.setEvents(View, Three); this.view.updateLanguage(this.group, "ch");//更改为中文字体 } add (a, b, c){ // a 添加至-> b, c 如果没有定义,新添加的对象将自动获得焦点 a = this.three.add(a, b); this.view.addList(a, b); if(c === undefined) this.setTarget(a, {focusList: true}); return a; } remove (a){ this.removeTarget(a); this.view.removeList(a); this.three.remove(a); this.three.update(); } setDrag(scene, camera, renderer, children){ let drag = new THREE.DragControls(children, camera, renderer.domElement); drag.addEventListener('hoveron', (e)=>{ this.dragTarget.old = null; this.dragTarget.now = e.object; }); drag.addEventListener('hoveroff', (e)=>{ this.dragTarget.now = null; this.dragTarget.old = e.object; }); drag.enabled = false; this.drag = drag; } setOrbit(scene, camera, renderer){ let orbit = new THREE.OrbitControls(camera, renderer.domElement); orbit.target = new THREE.Vector3(0, 0, 0);//控件焦点 //orbit.minPolarAngle = Math.PI * 0.3;//向上最大角度 //orbit.maxPolarAngle = Math.PI * 0.4;//向下最大角度 orbit.minDistance = camera.near;//最小距离 orbit.maxDistance = camera.far;//最大距离 orbit.autoRotateSpeed = 10;//自动旋转速度 //orbit.panSpeed = 100;//鼠标旋转速度 orbit.enableZoom = true;//是否启用缩放 orbit.enableKeys = true;//是否启用键盘 orbit.panSpeed = 1;//鼠标平移速度 orbit.keyPanSpeed = 100;//按键平移的速度 orbit.keys.LEFT = 65;//key a左 orbit.keys.UP = 87;//key w前 orbit.keys.RIGHT = 68;//key d右 orbit.keys.BOTTOM = 83;//key s后 orbit.addEventListener("change", ()=>{renderer.render(scene, camera);}); this.orbit = orbit; } setTransform(scene, camera, renderer){ var transform = new THREE.TransformControls(camera, renderer.domElement); transform.size = 1; scene.add(transform); this.transform = transform; transform.addEventListener( 'dragging-changed', (e)=>{this.orbit.enabled = !e.value;}); transform.addEventListener('change', (e)=>{ let type = transform.getMode(), mesh = this.target.object || e.target.object; let hc = mesh.WHX.elem.listContent.mesh.object; switch(type){ case "translate": hc.position.x = mesh.position.x; hc.position.y = mesh.position.y; hc.position.z = mesh.position.z; break; case "rotate": hc.rotation.x = mesh.rotation.x; hc.rotation.y = mesh.rotation.y; hc.rotation.z = mesh.rotation.z; break; case "scale": hc.scale.x = mesh.scale.x; hc.scale.y = mesh.scale.y; hc.scale.z = mesh.scale.z; break; default: break; } this.three.boxHelper.update(); renderer.render(scene, camera); }); } setTarget(object, param){ this.removeTarget(this.target.object); if(!object || !object.WHX) return; param = param || {}; this.three.boxHelper.setFromObject(object); this.three.boxHelper.visible = true; this.transform.attach(object); if(param.focusListStyle === undefined) this.view.focusListStyle(object.WHX.elem.son); if(param.focusList === true) this.view.focusList(object); object.WHX.elem.listContent.mesh.father.style.display = "block";//if(param.listContent === undefined) this.view.objectContents(object); this.target.object = object; this.three.update(); } removeTarget(object){ if(!object || !object.WHX) return; this.three.boxHelper.visible = false; this.transform.detach(object); this.view.focusListStyle(object.WHX.elem.son, "remove"); object.WHX.elem.listContent.mesh.father.style.display = "none"; //this.view.objectContents(); this.target.object = null; this.three.update(); } setEvents(View, Three){ let _holdGroup = null, getObject = (a)=>{ if(a.WHX_ID === undefined){return;} let o = Three.scene.getObjectById(a.WHX_ID); if(o === undefined){console.log("获取对象失败"); return;} //let object = a.tagName === "SUMMARY" ? o.WHX.backGroup : o; return o; } //scene -> list let down = ()=>{this.target.isDown = true;} let move = ()=>{if(this.target.isDown === true && this.target.isMove === false) this.target.isMove = true;} let up = ()=>{ if(this.target.isMove === false) this.setTarget(this.dragTarget.now, {focusList:true}); this.target.isMove = false; this.target.isDown = false; Three.renderer.domElement.removeEventListener("mousedown", down); Three.renderer.domElement.removeEventListener("mousemove", move); Three.renderer.domElement.removeEventListener("mouseup", up); } View.addEvent(Three.renderer.domElement, "mousedown", down); View.addEvent(Three.renderer.domElement, "mousemove", move); View.addEvent(Three.renderer.domElement, "mouseup", up); //list -> scene View.targetCallback = (a)=>{ if(a.WHX_control_ID !== undefined){ //WHX_control_ID = 0 删除 1 复制 2 子级 if(_holdGroup !== null) _holdGroup = null; if(a.WHX_control_ID === 2) a.style.background = "rgba(0, 0, 200, 0.5)"; let o = this.target.object; switch(a.WHX_control_ID){ case 0: this.remove(o); break; case 1: this.setTarget(this.add(o.clone(true), o)); break; case 2: _holdGroup = o; this.setTarget(o); break; default: break; } return; } if(_holdGroup !== null){//分组操作 let o = getObject(a); if(o){ this.remove(o); this.add(o, _holdGroup); } _holdGroup = null; View.right.t_control[3].style.background = ""; this.setTarget(o); return; } this.setTarget(getObject(a)); } } }
最新文章
- EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(七)
- Spring4学习笔记2-配置集合属性
- 【Alpha版本】冲刺阶段——Day 4
- JMS的可靠性
- JavaScript常见调试方法
- adb shell 命令详解(转)
- cookie的保存时间
- 元素过滤器(Element Filters)
- c语言实用功能库函数#include<;stdlib.h>;
- 搭建Nuget
- MySQL 基础学习
- DC/OS安装
- javascript 获取字符递增
- CentOS下MySQL安装失败,报socket &#39;/tmp/mysql.sock错误解决方法
- welcome-file-list修改后不生效
- [HAOI2017]供给侧改革
- BZOJ5300 [Cqoi2018]九连环 【数学】【FFT】
- Http File Server小工具
- SlickMaster.NET 开源表单设计器快速使用指南
- LeetCode 23 Merge k Sorted Lists(合并k个有序链表)
热门文章
- Flutter的盒子约束
- Linux双网卡绑定配置
- (转)嵌入式linux系统开发过程中遇到的&mdash;&mdash;volatile
- 什么是yarn,如何使用yarn安装项目依赖
- ExifPro Mod 3.0 64位绿色中文版
- httpServletRequest.getCharacterEncoding()取出来是个null,怎么办?
- 037.集群网络-Docker网络实现
- 【Java】反射调用与面向对象结合使用产生的惊艳
- Multi-batch TMT reveals false positives, batch effects and missing values(解读人:胡丹丹)
- 面试刷题11:java系统中io的分类有哪些?