<!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 物体缩放，坐标，旋转，位移，是否可见的更多相关文章

  1. unity发布安卓 手指控制物体缩放和旋转

    直接帮到物体的身上就可以了 using UnityEngine; using System.Collections;using System.IO;public class hehe : MonoBe ...

  2. Unity3D 几个基本动画（控制物体移动、旋转、缩放）

    Transform基本移动函数: 1.指定方向移动: //移动速度 float TranslateSpeed = 10f; //Vector3.forward 表示"向前" tra ...

  3. js手写图片查看器（图片的缩放、旋转、拖拽）

    在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...

  4. js实现图片查看器（图片的缩放、旋转、拖拽）

    一.关于图片查看器. 目前网络上能找到的图片查看器很多,谁便一搜就能出来.如:jquery.iviewer.js.Viewer.js这两个js文件,其中功能也足够满足大部分开发需求.但是单纯的就想实现 ...

  5. Three.js 保存camera（视角）设置到数据库，包括场景的缩放、旋转、移动等

    最近在做的项目中遇到需要保存当前的3d管道视角设置的问题,用户希望在对3d场景内的管道进行了缩放.旋转.移动之后可以将场景当前的视角状态保存在数据库中,并在下次加载时读取. 经过不断的尝试和研究,在同 ...

  6. touch.js 拖动、缩放、旋转 （鼠标手势）

    可以实现手势操作:拖动.缩放.旋转.封装好的脚本方法是这样的: var cat = window.cat || {}; cat.touchjs = { left: 0, top: 0, scaleVa ...

  7. Unity3d 控制物体移动、旋转、缩放

    在Unity中通过利用 Input Manager(输入管理器)可以很简单的实现对一个物体进行移动.旋转.缩放操作. 演示代码: //通过虚拟轴控制物体移动.旋转.缩放 public class Mo ...

  8. iOS围绕某点缩放或旋转的AnchorPoint的设定

    经常会遇到需求,要求手势的缩放或者旋转操作,要求动作变化围绕某一个特定点,或者是两指的中心点,或者是某一个点. 这个问题首先要清晰的知道,iOS各个view的层次关系.特别是,要清除的知道,当前vie ...

  9. OpenCV2:图像的几何变换,平移、镜像、缩放、旋转(2)

    在OpenCV2:图像的几何变换,平移.镜像.缩放.旋转(1)主要介绍了图像变换中的向前映射.向后映射.处理变换过程中浮点坐标像素值的插值算法,并且基于OpenCV2实现了两个简单的几何变换:平移和镜 ...

随机推荐

  1. 约束、自定义异常、hashlib模块、logging日志模块

    一.约束(重要***) 1.首先我们来说一下java和c#中的一些知识,学过java的人应该知道,java中除了有类和对象之外,还有接口类型,java规定,接口中不允许在方法内部写代码,只能约束继承它 ...

  2. MDF损坏或LDF文件损坏

    MDF损坏或LDF损坏 MDF丢失或LDF丢失 注意,这些情况必须要相同版本的sql server才能操作成功 当MDF损坏时 1.备份结尾日志 http://www.cnblogs.com/gere ...

  3. opencv3计算机视觉+Python（四）

    使用分水岭和GrabCut算法进行物体分割 用GrabCut算法进行图像分割 在OpenCV中,实现了grabcut分割算法,该算法可以方便的分割出前景图像,操作简单,而且分割的效果很好.算法的原理参 ...

  4. Python替换文件内容

    #!/usr/bin/env python import fileinput for line in fileinput.input('fansik',inplace=1): line = line. ...

  5. 如何使用 LINQ 执行插入、修改和删除操作

        本实例实现创建 LINQ To SQL 类对数据库进行插入.修改和删除的操作:以下是 具体步骤: 1 )建立 windows 窗体应用项目文件 2 )选择 ' 项目 \ 添加新项 ' 菜单,在 ...

  6. bootstrap-select 使用笔记 设置选中值及手动刷新

    直接笔记: 1.页面刚加载完填充select选项数据时,需要手动刷新一下组件,否则没有选项值.(组件初始化时,li 与 option 分离的,需要刷新一下(据说)) $.post('/cpms/tod ...

  7. php的异常和处理

    常见错误处理类型 语法错误 环境错误 逻辑错误 常见错误级别 Deprecated 最低级别的错误 不推荐,不建议,使用一些过期函数的时候会出现,程序继续执行 Notice 通知级别的错误 使用一些未 ...

  8. Python学习进程（9）序列

    序列是Python中最基本的数据结构.     (1)序列简介: 序列中的每个元素都分配一个数字标明它的位置或索引,第一个索引是0,第二个索引是1,依此类推.序列都可以进行的操作包括索引,切片,加,乘 ...

  9. qt的udp的初步使用（转）

    该程序实现的功能是:局域网内,每个用户登录到聊天软件,则软件界面的右端可以显示在线用户列表,分别显示的是用户名,主机名,ip地址.软件左边那大块是聊天内容显示界面,这里局域网相当于qq中的qq群,即群 ...

  10. Linux环境下的图形系统和AMD R600显卡编程(2)——Framebuffer、DRM、EXA和Mesa简介

    转:https://www.cnblogs.com/shoemaker/p/linux_graphics02.html 1. Framebuffer Framebuffer驱动提供基本的显示,fram ...