three添加和移除对象
创建场景
在第一章的地方就讲过怎么样创建一个最基本的场景,这里不重复了
html:部分
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<title>场景</title>
<style>
body{
margin:0;padding:0;
overflow:hidden;
}
</style>
</head>
<body>
<div id="WebGL-output"></div>
</body>
js:部分
var scene,camera,renderer,axes;
function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.set(-30,30,30);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0Xeeeeee));
renderer.shadowMapEnabled;
renderer.setSize(window.innerWidth,window.innerHeight);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
axes = new THREE.AxesHelper(20);
scene.add(axes);
planeGeometry = new THREE.PlaneGeometry(60,30);
var planeMaterial = new THREE.MeshPhongMaterial({color:0xeeeeee});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.position.set(15,0,0);
plane.rotation.x = -0.5*Math.PI;
scene.add(plane);
var stats = new Stats();
document.body.appendChild(stats.dom);
var controls = new THREE.TrackballControls(camera,renderer.domElement);
controls.maxDistance = 400.0;
controls.minDistance = 20.0;
var spotlight = new THREE.SpotLight(0xffffff);
var spotlightHelper = new THREE.SpotLightHelper(spotlight);
spotlight.position.set(-50,100,2);
spotlight.castShadow = true;
spotlight.shadow.mapSize.width = 2000; // default512
spotlight.shadow.mapSize.height = 2000; // default512
scene.add(spotlight);
scene.add(spotlightHelper);
function animate(){
requestAnimationFrame(animate);
renderer.render(scene,camera);
controls.update();
stats.update();
}
function onResize(){
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onResize, false);
animate();
onResize();
}
init();
上面的代码运行之后可以看到一个有点像是金属材质的平面
创造
向这个场景中加入对象的方法,把这个方法放在gui组件里面:
外部全作用域:
var guiControl = new function(){
this.addCube = function(){
var cubeSize = Math.ceil(Math.random()*3);//大小1-3之间 1,2,3
var cubeGeometry = new THREE.BoxGeometry(cubeSize,cubeSize,cubeSize);
var cubeMaterial = new THREE.MeshLambertMaterial({color:Math.random()*0xffffff});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.name = "方块—" + scene.children.length;
console.log(planeGeometry.parameters.width);
cube.position.x = -16 + Math.round((Math.random() * planeGeometry.parameters.width));
cube.position.y = 2 + Math.round(Math.random() * 20);
cube.position.z = - 15 + Math.round((Math.random()*planeGeometry.parameters.height));
console.log("添加方块:"+cube.name);
scene.add(cube);
}
}
这里面有一个生成一个随机颜色方块的方法并放在了一个对象当中
在init方法中添加,初始化dat gui对象:
var gui = new dat.GUI(); gui.add(guiControl, 'addCube');
然后运行,在右上角的gui面板中按addcube,就会在平面上随机产生一个新的立方体
生成很多个立方体:
在init函数中添加代码
function addmanycube(number){ for (var i = 0 ; i < number; i++){ guiControl.addCube(); } } addmanycube(50);
移除:
既然谈到了创造,就不得不说毁灭,这是与创造相对应的
在gui控制组件对象中添加函数:
var guiControl = new function(){
...
this.removeCube = function(){
var allChildren = scene.children;
var lastObject = allChildren[allChildren.length-1];
if(lastObject instanceof THREE.Mesh){
scene.remove(lastObject);
this.numberOfObjects = scene.children.length;
}
}
...
}
然后将这个函数添加进gui控制组件中:
init(){ ... gui.add(guiControl, 'removeCube'); ... }
这个时候:点击左上角的removeCube就会让方块消失一个:这里的对象组类似于堆栈,先添加的方块是最后移除的,后添加的方块最先移除
获取某个对象
方法:.getObjectById();
通过唯一的id标示来获取对象;
之前已经生成过50个方块,我们试试从其中获取一个方块 并且让他的速度更快一些:
function animate(){
requestAnimationFrame(animate);
renderer.render(scene,camera);
scene.traverse(function (obj) {
if(obj instanceof THREE.Mesh && obj != plane){
//obj.rotation.x += guiControl.rotateSpeed;
obj.rotation.y += (guiControl.rotateSpeed);
}
});
var obj = scene.getObjectById(20);//获取这个方块
obj.rotation.y += 0.4;//让这个方块每帧比其他方块快0.4
controls.update();
stats.update();
}
然后你就会发现我就是我,是不一样的烟火,在所有速度都一样块的方块中,有一个方块有点不太一样,它转的比别人更快了。
添加雾化效果
这是一个内置的函数,可以添加雾化效果,在远处的物体会被一层定义了颜色的雾覆盖,这样会让画面更有深度的感觉:
在gui控制器中添加雾化效果函数
var guiControl = new function(){
...
this.fog = function(){
scene.fog = new THREE.Fog( 0xffffff, 0.01, 100)//雾气颜色,近处的距离, 远处的距离
}
}
//在init函数中将这个方法添加控制按钮
function init(){
...
gui.add(guiControl, 'fog');
...
}
运行,点击右上角的控制面板fog按钮,场景就能产生雾化效果了
覆盖材质
覆盖材质是一个场景属性,可以让这个场景中所有对象的材质变成一样:
scene.overrideMaterial = new THREE.MeshPhongMaterial({color:0xffffff});
这会让整个场景中所有的对象的材质变得一样:
包括其中的辅助线的材质都变掉了,这个属性并不是很常用。
three添加和移除对象的更多相关文章
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- 13 装备的添加和移除(Unity3D)
本案例主要实现功能如下:1.创建UI界面,包含两个装备栏,四个武器选择栏以及显示人物的属性的文本框2.每一个装备都有自己的属性(AD/AP/AR/MP)3.人物也有自己的基础属性(AD/AP/AR/M ...
- DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个 ...
- spring:如何用代码动态向容器中添加或移除Bean ?
先来看一张类图: 有一个业务接口IFoo,提供了二个实现类:FooA及FooB,默认情况下,FooA使用@Component由Spring自动装配,如果出于某种原因,在运行时需要将IFoo的实现,则F ...
- js操作DOM动态添加和移除事件
非IE下,注意事件名不带on,如onclick为click 添加事件:DOM对象.addEventListener('事件名',函数名,true/false); 删除事件:DOM对象.removeEv ...
- jQuery中添加/改变/移除改变CSS样式例子
在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧. CSS()方法改变CSS样式 ...
- 浏览器扩展系列————给MSTHML添加内置脚本对象【包括自定义事件】
原文:浏览器扩展系列----给MSTHML添加内置脚本对象[包括自定义事件] 使用场合: 在程序中使用WebBrowser或相关的控件如:axWebBrowser等.打开本地的html文件时,可以在h ...
- 1.javascript节点的操作 创建、添加、移除、移动、复制、插入(修改)
(1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节 ...
- DOM操作——JavaScript怎样添加、移除、移动、复制、创建和查找节点
(1). 创建新节点 createDocumentFragment() // 创建一个DOM片段 createElement() // 创建一个具体的元素 createTextNode() // 创建 ...
随机推荐
- 网络流--最大流dinic模板
标准的大白书式模板,除了变量名并不一样……在主函数中只需要用到 init 函数.add 函数以及 mf 函数 #include<stdio.h> //差不多要加这么些头文件 #includ ...
- 剑指offer-特定二维数组中查找一个元素是否存在-二分搜索-二维数组
int [][] array ={ {1,2,8,9}, {2,4,9,12}, {4,7,10,13}, {6,8,11,19} }; 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都 ...
- ubuntu安装sublime教程
1.安装Sublime Text 3 及常用的神器插件 ①首先添加sublime text 3的仓库:sudo add-apt-repository ppa:webupd8team/sublime-t ...
- Web Js推断键盘出发事件
window.document.onkeydown = disableRefresh; function disableRefresh(evt){ evt = (evt) ? evt : wind ...
- Postman 常用测试结果验证及使用技巧
Postman的test本质上是JavaScript代码,通过我们编写测试代码,每一个tests返回True,或是False.每一个tests实际上就是一个测试用例 官方文档给出了很多验证方式,我们通 ...
- 设置Linux系统的空闲等待时间TMOUT
为了增强Linux系统的安全性,我们需要在用户输入空闲一段时间后自动断开,这个操作可以由设置TMOUT值来实现.将以下字段加入到/etc/profile 中即可(对所有用户生效). export TM ...
- Jenkins进阶-发布后自动创建git tag(5)
为了便于项目中对发布的版本进行回滚,所以我们每次发布完成以后自动创建git tag. 1,创建一个Jenkins任务,命名成为push_tag_demo: 2,配置<源码管理>,这里配置比 ...
- Angular 4 路由时传递数据
路由时传递数据的方式有 1. 在查询参数中传递数据 2. 在路由路径中传递参数 3. 在路由配置中传递参数 一.在查询参数中传递数据 在前一节的基础上,我们增加路由数据传递 2. 接收参数的地方 3. ...
- jquery dataTable的学习
http://www.cnblogs.com/nier/archive/2012/03/19/2406450.html 分页 bPaginite:true;是否启用分页功能 sPaginationTy ...
- RabbitMQ 主题
RabbitMQ (三) 发布/订阅 RabbitMQ主题 RabbitMQ Tutorials