09-THREE.JS 物体缩放,坐标,旋转,位移,是否可见
2024-09-01 21:46:53
<!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>
最新文章
- 大话设计模式C++版——代理模式
- cmd chcp命令切换字符格式UTF8
- (转)JAVA AJAX教程第一章-初始AJAX
- HTML中的英文缩写标记、属性
- Android -------- 序列化器生成xml文件
- <;a>;标签中 href=";/"; 和 hideFocus=";true";
- POJ2421 &; HDU1102 Constructing Roads(最小生成树)
- 201521123080《Java程序设计》第1周学习总结
- xamarin forms中的Button文本默认大写
- Linux中断程序命令
- 提取excel表数据成json格式的以及对图片重命名
- HoloLens开发手记 - 使用HoloLens模拟器 Using HoloLens emulator
- MyBatis的生命周期
- 关于GridControl--gridview的下拉框列(下拉列表列)
- 微软BI 之SSRS 系列 - 报表中分组聚合中处理不规则层次结构的技巧(没有子元素的时候不展开, 删除+符号)
- Spring MVC 异常处理 - SimpleMappingExceptionResolver
- 深入理解JAVA集合系列二:ConcurrentHashMap源码解读
- [BZOJ2809&;1455&;1367]解题报告|可并堆
- UML_04_时序图
- c++远征