javascript 3d网页 示例 ( three.js 初探 七)
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 初探 七)的更多相关文章
- 网页3D效果库Three.js初窥
网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...
- [JS]jQuery,javascript获得网页的高度和宽度
[JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...
- Javascript模块化编程:require.js的用法
摘自:http://blog.jobbole.com/30046/ 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库 ...
- Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探
什么是Three.js three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包 ...
- JavaScript交互式网页设计 • 【第1章 JavaScript 基本语法】
全部章节 >>>> 本章目录 1.1 JavaScript 概述 1.1.1 JavaScript 简介 1.1.2 JavaScript 的概念和执行原理 1.1.3 J ...
- 将JavaScript 插入网页的方法
将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...
- [转]backbone.js 初探
本文转自:http://weakfi.iteye.com/blog/1391990 什么是backbone backbone不是脊椎骨,而是帮助开发重量级的javascript应用的框架. 主要提供了 ...
- Javascript调用ActiveX示例
Javascript调用ActiveX示例 写一个ActiveX控件比如叫做MyNameSpace.SecreteInfo,安装在客户机器上,这样可以通过c++获取到机器的几乎任何信息. 在网 ...
- jquery的height()和javascript的height总结,js获取屏幕高度
jquery的height()和javascript的height总结,js获取屏幕高度 2014年9月18日 15048次浏览 引子 今天是九一八事变八十三周年,大家勿忘国耻!加油学习!经济和技术等 ...
随机推荐
- Python - requests发送请求报错:UnicodeEncodeError: 'latin-1' codec can't encode characters in position 13-14: 小明 is not valid Latin-1. Use body.encode('utf-8') if you want to send it encoded in UTF-8.
背景 在做接口自动化的时候,Excel作为数据驱动,里面存了中文,通过第三方库读取中文当请求参数传入 requests.post() 里面,就会报错 UnicodeEncodeError: 'lati ...
- Vue的模板内换行问题
在用vue的模板{{}}进行渲染文本时候,字符串换行不起作用,后使用ES6的模板字符串进行换行仍然不起作用,解决方法: <div>{{str}}</div> 可换为用v-htm ...
- docker的安装使用
目录 Docker 入门到精通 CentOS安装Docker 设置管理Docker的仓库 安装Docker Engine-Community Docker基础命令 开启关闭 镜像操作 容器操作 Doc ...
- Simulink仿真入门到精通(一) Simulink界面介绍
Simulink提供了一个动态系统建模.仿真和综合分析的集成环境,是MATLAB最重要的组件之一. 以模块为功能单位,通过信号线进行连接 通过GUI调配每个模块的参数 仿真结果以数值和图像等形象化方式 ...
- Python装饰器及内置函数
装饰器 听名字应该知道这是一个装饰的东西,我们今天就来讲解一下装饰器,有的铁子们应该听说,有的没有听说过.没有关系我告诉你们这是一个很神奇的东西 这个有多神奇呢? 我们先来复习一下闭包 def fun ...
- Java安装和配置
一. Java安装和配置 1.JDK下载地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-21331 ...
- 一起了解 .Net Foundation 项目 No.20
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. System.Drawin ...
- 【JAVA进阶架构师指南】之一:如何进行架构设计
前言 本博客是长篇系列博客,旨在帮助想提升自己,突破技术瓶颈,但又苦于不知道如何进行系统学习从而提升自己的童鞋.笔者假设读者具有3-5年开发经验,java基础扎实,想突破自己的技术瓶颈,成为一位优 ...
- 【分布式锁】03-使用Redisson实现RedLock原理
前言 前面已经学习了Redission可重入锁以及公平锁的原理,接着看看Redission是如何来实现RedLock的. RedLock原理 RedLock是基于redis实现的分布式锁,它能够保证以 ...
- Dubbo之服务消费原理
前言 上篇文章<Dubbo之服务暴露>分析 Dubbo 服务是如何暴露的,本文接着分析 Dubbo 服务的消费流程.主要从以下几个方面进行分析:注册中心的暴露:通过注册中心进行服务消费通知 ...