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));
         }

     }

 }

javascript 3d网页 示例 ( three.js 初探 七)的更多相关文章

  1. 网页3D效果库Three.js初窥

    网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...

  2. [JS]jQuery,javascript获得网页的高度和宽度

    [JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...

  3. Javascript模块化编程:require.js的用法

    摘自:http://blog.jobbole.com/30046/ 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库 ...

  4. Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探

    什么是Three.js three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包 ...

  5. JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】

    全部章节   >>>> 本章目录 1.1 JavaScript 概述 1.1.1 JavaScript 简介 1.1.2 JavaScript 的概念和执行原理 1.1.3 J ...

  6. 将JavaScript 插入网页的方法

    将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...

  7. [转]backbone.js 初探

    本文转自:http://weakfi.iteye.com/blog/1391990 什么是backbone backbone不是脊椎骨,而是帮助开发重量级的javascript应用的框架. 主要提供了 ...

  8. Javascript调用ActiveX示例

      Javascript调用ActiveX示例   写一个ActiveX控件比如叫做MyNameSpace.SecreteInfo,安装在客户机器上,这样可以通过c++获取到机器的几乎任何信息. 在网 ...

  9. jquery的height()和javascript的height总结,js获取屏幕高度

    jquery的height()和javascript的height总结,js获取屏幕高度 2014年9月18日 15048次浏览 引子 今天是九一八事变八十三周年,大家勿忘国耻!加油学习!经济和技术等 ...

随机推荐

  1. 基于正向扫描的并行区间连接平面扫描算法(IEEE论文)

    作者: Panagiotis Bouros ∗Department of Computer ScienceAarhus University, Denmarkpbour@cs.au.dkNikos M ...

  2. 简单易用的图像解码库介绍 —— stb_image

    原文链接:简单易用的图像解码库介绍 -- stb_image 说到图像解码库,最容易想起的就是 libpng 和 libjpeg 这两个老牌图像解码库了. libpng 和 libjpeg 分别各自对 ...

  3. scrapy全栈抓xpc练习

    # spider文件 # -*- coding: utf-8 -*- import scrapy import re from scrapy import Request import json im ...

  4. C#的关键字Explicit 和 Implicit

    一.explicit和implicit explicit 关键字用于声明必须使用强制转换来调用的用户定义的类型转换运算符:implicit 关键字用于声明隐式的用户自定义的类型转换运算符. 总结来说: ...

  5. Nginx配置Web项目(多页面应用,单页面应用)

    目前前端项目 可分两种: 多页面应用,单页面应用. 单页面应用 入口是一个html文件,页面路由由js控制,动态往html页面插入DOM. 多页面应用 是由多个html文件组成,浏览器访问的是对应服务 ...

  6. 建议11:增强数组排序的sort功能

    sort方法不仅按字母顺序进行排序,还可以根据其他顺序执行操作.这时就必须为方法提供一个比较函数的参数,该函数要比较两个值,然后返回一个用于说明这两个值得相对顺序的数字.比较函数应该具有两个参数a和b ...

  7. 1. postman使用

    postman使用教程: https://blog.csdn.net/fxbin123/article/details/80428216 http://bayescafe.com/tools/use- ...

  8. 【python 数据结构】相同某个字段值的所有数据(整理成数组包字典的形式)

    class MonitoredKeywordMore(APIView): def post(self, request): try: # 设置原生命令并且请求数据 parents_asin = str ...

  9. Redhat 线下赛 WEB WP

    赛制 给每个参赛队伍所有题目的gamebox,参赛队伍在开赛时就能获取到所有题目的源码,可以选择先防御后攻击或先攻击后防御,只要拿到gamebox上的flag,机器人就会自动帮你攻击场上所有未防御选手 ...

  10. .gitignore排除(不忽略)二级以上目录下的文件或目录

    在.gitignore中,结合使用/*和!filename的语法,可以达到除特定文件或目录外全部忽略的目的.但当希望不忽略的文件或目录在二级或多级目录下时,如果这样写 /* !/sub/subsub/ ...