Three.js中实现点击按钮添加删除旋转立方体
生活随笔
收集整理的這篇文章主要介紹了
Three.js中实现点击按钮添加删除旋转立方体
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
場景
Three.js中引入dat.gui庫實(shí)現(xiàn)界面組件控制動(dòng)畫速度變量：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/119391130
在上面的基礎(chǔ)上，實(shí)現(xiàn)點(diǎn)擊按鈕添加和刪除立方體。
實(shí)現(xiàn)效果如下
?
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。
實(shí)現(xiàn)
通過dat.gui可以實(shí)現(xiàn)控件控制代碼中的變量
當(dāng)點(diǎn)擊addCube按鈕時(shí)，一個(gè)新的THREE.CubeGeometry實(shí)例就會(huì)被創(chuàng)建出來，
其尺寸是0到3之間的隨機(jī)數(shù)。在場景中的顏色和位置也是隨機(jī)的。
使用name屬性為這個(gè)方塊指定了一個(gè)名字。
可以在后面調(diào)試的時(shí)候看到，方便查找指定的對(duì)象
添加控件的方法
??????????? this.addCube = function () {//隨機(jī)大小尺寸var cubeSize = Math.ceil((Math.random() * 3));// 生成立方體var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);//創(chuàng)建新的MeshLambertMaterial實(shí)例，顏色隨機(jī)var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});//合并var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.castShadow = true;// 生成隨機(jī)坐標(biāo)cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));cube.position.y = Math.round((Math.random() * 5));cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height));// 方塊添加進(jìn)場景scene.add(cube);this.numberOfObjects = scene.children.length;};從場景中移除一個(gè)對(duì)象，通過THREE.Scene()對(duì)象的children屬性獲取最后添加的對(duì)象。
還要檢查一下這個(gè)對(duì)象是不是一個(gè)Mesh對(duì)象，以防移除相機(jī)和光源。
刪掉這個(gè)對(duì)象之后，更新控制界面上那個(gè)表示場景中對(duì)象的屬性。
刪除控件的方法
??????????? this.removeCube = function () {var allChildren = scene.children;var lastObject = allChildren[allChildren.length - 1];//防止移除相機(jī)和光源if (lastObject instanceof THREE.Mesh) {scene.remove(lastObject);this.numberOfObjects = scene.children.length;}};使用THREE.Scene.traverse()函數(shù)。我們可以將一個(gè)函數(shù)作為參數(shù)傳遞給traverser()函數(shù)。
這個(gè)傳遞過來的函數(shù)將會(huì)在場景中的每一個(gè)子對(duì)象上調(diào)用一次。
在render()函數(shù)，使用traverse()函數(shù)類更新每個(gè)方塊的旋轉(zhuǎn)弧度。
??????? render();function render() {// 循環(huán)每個(gè)對(duì)象scene.traverse(function (e) {if (e instanceof THREE.Mesh && e != plane) {e.rotation.x += controls.rotationSpeed;e.rotation.y += controls.rotationSpeed;e.rotation.z += controls.rotationSpeed;}});// 動(dòng)畫實(shí)現(xiàn)requestAnimationFrame(render);renderer.render(scene, camera);}完整的示例代碼
<!DOCTYPE html><html><head><title>場景中添加刪除方塊</title><script type="text/javascript" src="./js/three.js"></script><script type="text/javascript" src="./js/dat.gui.js"></script><style>body {/* 將邊距設(shè)置為0，溢出設(shè)置為隱藏，以實(shí)現(xiàn)全屏顯示 */margin: 0;overflow: hidden;}</style> </head> <body><!-- 顯示的div --> <div id="WebGL-output"> </div><script type="text/javascript">// 初始化的方法function init() {// 創(chuàng)建一個(gè)場景，它將包含我們所有的元素，如物體，攝像機(jī)和燈光var scene = new THREE.Scene();// 創(chuàng)建一個(gè)相機(jī)，它定義了我們正在看的地方var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 創(chuàng)建渲染器并設(shè)置大小var renderer = new THREE.WebGLRenderer();//將renderer的背景色設(shè)置為接近白色renderer.setClearColor(new THREE.Color(0xEEEEEE,1.0));//設(shè)置大小renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMapEnabled = true;// 創(chuàng)建平面，并定義平面的尺寸var planeGeometry = new THREE.PlaneGeometry(80, 40,1,1);//創(chuàng)建一個(gè)基本材質(zhì)，并設(shè)置顏色var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//把兩個(gè)對(duì)象合并到Mesh網(wǎng)格對(duì)象var plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.receiveShadow = true;// 設(shè)置平面繞x軸旋轉(zhuǎn)90度plane.rotation.x = -0.5 * Math.PI;// 設(shè)置平面的坐標(biāo)位置plane.position.x = 15;plane.position.y = 0;plane.position.z = 0;// 將平面添加進(jìn)場景scene.add(plane);// 定義相機(jī)的坐標(biāo)，即懸掛在場景的上方camera.position.x = -30;camera.position.y = 40;camera.position.z = 30;//為了確保相機(jī)能夠拍攝到這些物體，使用lookat函數(shù)指向場景的中心camera.lookAt(scene.position);// 添加環(huán)境光var ambientLight = new THREE.AmbientLight(0x0c0c0c);scene.add(ambientLight);// spotLight光源是聚光燈光源，類似手電筒，會(huì)形成一種錐形效果的光，可以產(chǎn)生陰影var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-40, 60, -10);spotLight.castShadow = true;scene.add(spotLight);// 將renderer的輸出掛接到HTML終點(diǎn)div元素document.getElementById("WebGL-output").appendChild(renderer.domElement);var step = 0;var controls = new function () {//速度值this.rotationSpeed = 0.02;//立方體個(gè)數(shù)this.numberOfObjects = scene.children.length;this.removeCube = function () {var allChildren = scene.children;var lastObject = allChildren[allChildren.length - 1];//防止移除相機(jī)和光源if (lastObject instanceof THREE.Mesh) {scene.remove(lastObject);this.numberOfObjects = scene.children.length;}};this.addCube = function () {//隨機(jī)大小尺寸var cubeSize = Math.ceil((Math.random() * 3));// 生成立方體var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);//創(chuàng)建新的MeshLambertMaterial實(shí)例，顏色隨機(jī)var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});//合并var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.castShadow = true;cube.name = "cube-"+scene.children.length;// 生成隨機(jī)坐標(biāo)cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));cube.position.y = Math.round((Math.random() * 5));cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height));// 方塊添加進(jìn)場景scene.add(cube);this.numberOfObjects = scene.children.length;};//輸出場景中的對(duì)象this.outputObjects = function () {console.log(scene.children);}};var gui = new dat.GUI();gui.add(controls, 'rotationSpeed', 0, 0.5);gui.add(controls, 'addCube');gui.add(controls, 'removeCube');gui.add(controls, 'outputObjects');gui.add(controls, 'numberOfObjects').listen();render();function render() {// 循環(huán)每個(gè)對(duì)象scene.traverse(function (e) {if (e instanceof THREE.Mesh && e != plane) {e.rotation.x += controls.rotationSpeed;e.rotation.y += controls.rotationSpeed;e.rotation.z += controls.rotationSpeed;}});// 動(dòng)畫實(shí)現(xiàn)requestAnimationFrame(render);renderer.render(scene, camera);}}window.onload = init;</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的Three.js中实现点击按钮添加删除旋转立方体的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Three.js中实现ASCII文本动画
- 下一篇： Three.js中实现场景雾化效果