09-THREE.JS 物体缩放,坐标,旋转,位移,是否可见
<!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 物体缩放,坐标,旋转,位移,是否可见的更多相关文章
- unity发布安卓 手指控制物体缩放和旋转
直接帮到物体的身上就可以了 using UnityEngine; using System.Collections;using System.IO;public class hehe : MonoBe ...
- Unity3D 几个基本动画(控制物体移动、旋转、缩放)
Transform基本移动函数: 1.指定方向移动: //移动速度 float TranslateSpeed = 10f; //Vector3.forward 表示"向前" tra ...
- js手写图片查看器(图片的缩放、旋转、拖拽)
在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...
- js实现图片查看器(图片的缩放、旋转、拖拽)
一.关于图片查看器. 目前网络上能找到的图片查看器很多,谁便一搜就能出来.如:jquery.iviewer.js.Viewer.js这两个js文件,其中功能也足够满足大部分开发需求.但是单纯的就想实现 ...
- Three.js 保存camera(视角)设置到数据库,包括场景的缩放、旋转、移动等
最近在做的项目中遇到需要保存当前的3d管道视角设置的问题,用户希望在对3d场景内的管道进行了缩放.旋转.移动之后可以将场景当前的视角状态保存在数据库中,并在下次加载时读取. 经过不断的尝试和研究,在同 ...
- touch.js 拖动、缩放、旋转 (鼠标手势)
可以实现手势操作:拖动.缩放.旋转.封装好的脚本方法是这样的: var cat = window.cat || {}; cat.touchjs = { left: 0, top: 0, scaleVa ...
- Unity3d 控制物体移动、旋转、缩放
在Unity中通过利用 Input Manager(输入管理器)可以很简单的实现对一个物体进行移动.旋转.缩放操作. 演示代码: //通过虚拟轴控制物体移动.旋转.缩放 public class Mo ...
- iOS围绕某点缩放或旋转的AnchorPoint的设定
经常会遇到需求,要求手势的缩放或者旋转操作,要求动作变化围绕某一个特定点,或者是两指的中心点,或者是某一个点. 这个问题首先要清晰的知道,iOS各个view的层次关系.特别是,要清除的知道,当前vie ...
- OpenCV2:图像的几何变换,平移、镜像、缩放、旋转(2)
在OpenCV2:图像的几何变换,平移.镜像.缩放.旋转(1)主要介绍了图像变换中的向前映射.向后映射.处理变换过程中浮点坐标像素值的插值算法,并且基于OpenCV2实现了两个简单的几何变换:平移和镜 ...
随机推荐
- ExtJS4 给同一个formpanel不同的url
formpanel能够这样使用,api上的样例: var panel=Ext.create('Ext.form.Panel', { title: 'Simple Form', bodyPadding: ...
- Spring学习笔记2—AOP
1.AOP概念 AOP(Aspect Oriented Programming):面向切面编程,AOP能够将那些与业务无关,却为业务模块所共同调用的应用(例如事务处理.日志管理.权限控制等)封装起来, ...
- solr-6.4.2安装+分词器配置
一.solr安装 solr下载地址:http://archive.apache.org/dist/lucene/solr/6.4.2/ 1.解压solr软件包:tar xf solr-6.4.2.tg ...
- MapX小试
需MapX 控件 string layerName = "12Q3_new"; string tabFile = string.Format(@"E:\map\地图\现在 ...
- css字体样式
css字体样式(Font Style) 属性 css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant font-weight f ...
- 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法
PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...
- nodejs安装,配置环境,使用express建立一个新项目
1.下载nodejs安装包 去nodejs官网下载最新版本就行,网址:http://nodejs.cn/download/,点击自己适用的系统,自动下载跟电脑操作系统位数符合的安装包, 下载下来安装包 ...
- bowtie2用法
bowtie2的功能:短序列的比对 用法:bowtie2 [options]* -x <bt2-idx> {-1 <m1> -2 <m2> | -U <r&g ...
- 三、golang时间、流程控、函数
一.本篇内容 1.string和strconv使用 2.go中的时间和日期类型 3.流程控制 4.函数讲解 二.string和strconv使用 1. string.HasPrefix(s trin ...
- 1.1nginx安装
1.必要软件准备 安装 pcre为了支持 rewrite 功能,我们需要安装 pcre# yum install pcre* //如过你已经装了,请跳过这一步 安装 openssl需要 ssl 的 ...