<!DOCTYPE html><html><head> ???<title></title> ???<script src="https://cdn.bootcss.com/three.js/r67/three.js"></script> ???<script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script> ???<script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script> ???<style> ???????body { ???????????margin: 0; ???????????overflow: hidden; ???????} ???</style></head><body><div id="Stats-output"></div><div id="WebGL-output"></div><script type="text/javascript"> ???// 初始化 ???function init() { ???????var stats = initStats(); ???????// 创建一个场景 ???????var scene = new THREE.Scene(); ???????// 创建一个相机 ???????var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); ???????// 创建渲染 ???????var renderer = new THREE.WebGLRenderer(); ???????renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); ???????renderer.setSize(window.innerWidth, window.innerHeight); ???????renderer.shadowMapEnabled = true; ???????// 创建一个地面 ???????var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1); ???????var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}); ???????var plane = new THREE.Mesh(planeGeometry, planeMaterial); ???????plane.receiveShadow = true; ???????// 旋转地面 保持水平 ???????plane.rotation.x = -0.5 * Math.PI; ???????plane.position.x = 0; ???????plane.position.y = 0; ???????plane.position.z = 0; ???????// 在场景中添加水平面 ???????scene.add(plane); ???????// 相机位置设置 ???????camera.position.x = -30; ???????camera.position.y = 40; ???????camera.position.z = 30; ???????camera.lookAt(scene.position); ???????// 添加自然光 ???????var ambientLight = new THREE.AmbientLight(0x0c0c0c); ???????scene.add(ambientLight); ???????// 添加点光源 ???????var spotLight = new THREE.SpotLight(0xffffff); ???????spotLight.position.set(-40, 60, 020); ???????spotLight.castShadow = true; ???????scene.add(spotLight); ???????// 追加到DOM节点中去 ???????document.getElementById("WebGL-output").appendChild(renderer.domElement); ???????????????var step = 0; ???????var controls = new function () { ???????????this.scaleX = 1; ???????????this.scaleY = 1; ???????????this.scaleZ = 1; ???????????this.positionX = 0; ???????????this.positionY = 4; ???????????this.positionZ = 0; ???????????this.rotationX = 0; ???????????this.rotationY = 0; ???????????this.rotationZ = 0; ???????????this.scale = 1; ???????????this.translateX = 0; ???????????this.translateY = 0; ???????????this.translateZ = 0; ???????????this.visible = true; ???????????this.translate = function () { ???????????????//沿着xyz位移 ???????????????cube.translateX(controls.translateX); ???????????????cube.translateY(controls.translateY); ???????????????cube.translateZ(controls.translateZ); ???????????????//设置xyz坐标 ???????????????controls.positionX = cube.position.x; ???????????????controls.positionY = cube.position.y; ???????????????controls.positionZ = cube.position.z; ???????????} ???????}; ???????//创建长方体 ?光照材质 ???????var material = new THREE.MeshLambertMaterial({color: 0x44ff44}); ???????var geom = new THREE.BoxGeometry(5, 8, 3); ???????var cube = new THREE.Mesh(geom, material); ???????cube.position.y = 4; ???????cube.castShadow = true; ???????scene.add(cube); ???????var gui = new dat.GUI(); ???????guiScale = gui.addFolder(‘scale‘); ???????guiScale.add(controls, ‘scaleX‘, 0, 5); ???????guiScale.add(controls, ‘scaleY‘, 0, 5); ???????guiScale.add(controls, ‘scaleZ‘, 0, 5); ???????guiPosition = gui.addFolder(‘position‘); ???????var contX = guiPosition.add(controls, ‘positionX‘, -10, 10); ???????var contY = guiPosition.add(controls, ‘positionY‘, -4, 20); ???????var contZ = guiPosition.add(controls, ‘positionZ‘, -10, 10); ???????contX.listen(); ???????contX.onChange(function (value) { ???????????cube.position.x = controls.positionX; ???????}); ???????contY.listen(); ???????contY.onChange(function (value) { ???????????cube.position.y = controls.positionY; ???????}); ???????contZ.listen(); ???????contZ.onChange(function (value) { ???????????cube.position.z = controls.positionZ; ???????}); ???????guiRotation = gui.addFolder(‘rotation‘); ???????guiRotation.add(controls, ‘rotationX‘, -4, 4); ???????guiRotation.add(controls, ‘rotationY‘, -4, 4); ???????guiRotation.add(controls, ‘rotationZ‘, -4, 4); ???????guiTranslate = gui.addFolder(‘translate‘); ???????guiTranslate.add(controls, ‘translateX‘, -10, 10); ???????guiTranslate.add(controls, ‘translateY‘, -10, 10); ???????guiTranslate.add(controls, ‘translateZ‘, -10, 10); ???????guiTranslate.add(controls, ‘translate‘); ???????gui.add(controls, ‘visible‘); ???????render(); ???????function render() { ???????????stats.update(); ???????????cube.visible = controls.visible; ???????????cube.rotation.x = controls.rotationX; ???????????cube.rotation.y = controls.rotationY; ???????????cube.rotation.z = controls.rotationZ; ???????????cube.scale.set(controls.scaleX, controls.scaleY, controls.scaleZ); ???????????requestAnimationFrame(render); ???????????renderer.render(scene, camera); ???????} ???????function initStats() { ???????????var stats = new Stats(); ???????????stats.setMode(0); // 0: fps, 1: ms ???????????stats.domElement.style.position = ‘absolute‘; ???????????stats.domElement.style.left = ‘0px‘; ???????????stats.domElement.style.top = ‘0px‘; ???????????document.getElementById("Stats-output").appendChild(stats.domElement); ???????????return stats; ???????} ???} ???window.onload = init</script></body></html>09-THREE.JS 物体缩放，坐标，旋转，位移，是否可见
原文地址：https://www.cnblogs.com/shuaihan/p/9875265.html