<!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);

        camera.position.x = 120;

        camera.position.y = 60;

        camera.position.z = 180;

        // 创建渲染器

        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

        renderer.setSize(window.innerWidth, window.innerHeight);

        // 创建一个地板

        var planeGeometry = new THREE.PlaneGeometry(180, 180);

        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});

        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        // 让地面保持水平

        plane.rotation.x = -0.5 * Math.PI;

        plane.position.x = 0;

        plane.position.y = 0;

        plane.position.z = 0;

        // 添加地板到场景中去

        scene.add(plane);

        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ee22});

        //添加小方块到底层

        for (var j = 0; j < (planeGeometry.parameters.height / 5); j++) {

            for (var i = 0; i < planeGeometry.parameters.width / 5; i++) {

                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

                cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5);

                cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5);

                cube.position.y = 2;

                scene.add(cube);

            }

        }

        //创建一个圆球

        var lookAtGeom = new THREE.SphereGeometry(2);

        var lookAtMesh = new THREE.Mesh(lookAtGeom, new THREE.MeshLambertMaterial({color: 0xff0000}));

        scene.add(lookAtMesh);

        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);

        directionalLight.position.set(-20, 40, 60);

        scene.add(directionalLight);

        // 自然光

        var ambientLight = new THREE.AmbientLight(0x292929);

        scene.add(ambientLight);

        // 将渲染后的效果添加到

        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        var step = 0;

        var controls = new function () {

            this.perspective = "Perspective";

            this.switchCamera = function () {

                if (camera instanceof THREE.PerspectiveCamera) {

                    camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);

                    camera.position.x = 120;

                    camera.position.y = 60;

                    camera.position.z = 180;

                    camera.lookAt(scene.position);

                    this.perspective = "Orthographic";

                } else {

                    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

                    camera.position.x = 120;

                    camera.position.y = 60;

                    camera.position.z = 180;

                    camera.lookAt(scene.position);

                    this.perspective = "Perspective";

                }

            };

        };

        var gui = new dat.GUI();

        gui.add(controls, 'switchCamera');

        gui.add(controls, 'perspective').listen();

        // make sure that for the first time, the

        // camera is looking at the scene

        //   camera.lookAt(scene.position);

        render();

        var step = 0;

        function render() {

            stats.update();

            //圆球拷贝坐标

            step += 0.02;

            if (camera instanceof THREE.Camera) {

                var x = 10 + ( 100 * (Math.sin(step)));

                camera.lookAt(new THREE.Vector3(x, 10, 0));

                lookAtMesh.position.copy(new THREE.Vector3(x, 10, 0));

            }

//        .position.x = 20+( 10*(Math.cos(step)));

            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>

11-THREE.JS 相机始终朝向某个物体的更多相关文章

  1. three.js 相机

    图形学中的相机定义了三维空间到二维屏幕的投影方式,根据投影方式的不同,相机可分为 正交投影相机 与 透视投影相机. 正交投影相机 : 近处.远处的物体大小尺寸保持一致,常适用于工程制图.建模软件,如C ...

  2. jquery-1.11.1.js

       每次想要使用这个js时,总是要到官网上下载,太麻烦,现在把它收录了 jquery-1.11.1.js /*! * jQuery JavaScript Library v1.11.1 * http ...

  3. [UE4]蓝图Get Control Rotation获取人物角色朝向，设置默认人物相机，朝向与controller绑定

    具体应用:控制人物移动方向 也可以使用“CombineRotators”将角色控制器Z轴旋转90°,然后再取正面方向,达到跟“Get Right Vector”一样的效果: 设置关联人物朝向使用控制器 ...

  4. UE4中如何使物体始终朝向摄像头？

    要使物体始终正面朝向摄像头需要用到一个关键节点:Find Look at Rotation 其中Start连接需要旋转的物体位置矢量,Target连接摄像头位置矢量 最后设置SetActorRotat ...

  5. 【three.js第六课】物体3D化

    1.在[three.js第五课]的基础上引入AnaglyphEffect.js文件. 文件路径: three源码包中进入[examples]文件夹: 进入[js]文件夹: 进入[effects]文件夹 ...

  6. 11、js 数组详细操作方法及解析合集

    js 数组详细操作方法及解析合集 前言 在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个api,在开发中也很容易 ...

  7. ajaxupload.js调用始终进入error回调

    现象:脚本调用成功,文件上传也成功,但是始终进入error的回调函数. 1. ajaxfileupload.js jQuery.extend({ handleError: function( s, x ...

  8. three.js使用卷积法实现物体描边效果

    法线延展法 网上使用法线延展法实现物体描边效果的文章比较多,这里不再描述. 但是这种方法有个缺点:当两个面的法线夹角差别较大时,两个面的描边无法完美连接.如下图所示: 卷积法 这里使用另一种方法卷积法 ...

  9. 11 (H5*) js第1天 基本数据类型、变量

    目录 1:  js的介绍 2:写js代码注意的地方 3:变量 4:变量的命名和作用 5:变量的类型 6:Number类型 7:string类型 8:类型转换 9:操作符号 复习 <script& ...

随机推荐

  1. [Erlang危机](5.1.3)进程

    原创文章,转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface 联系邮箱:cto@188.com Processes Trying to ge ...

  2. C#窗口的Load事件与Shown事件的差别

    Load:在第一次显示窗口前发生. <pre name="code" class="csharp"> private void Form1_Load ...

  3. Python学习笔记2_Python基础

    一.变量(给数据起个名字) 变量是计算机内存中的一块区域,变量可以存储规定范围内的值,而且值可以改变. 1.变量的命名方法 -变量名有字母.数字.下划线组成 -不能以数字开头 -不可以使用关键字 -a ...

  4. 剑指offer 面试23题

    面试23题: 题目:如果一个链表中包含环,如何找出环的入口节点? 解题分析:其实此题可以分解为三个题目:1)如何判断一个链表中是否包含环?2)如何找到环的入口节点?3)如何得到环中节点的数目? 解决此 ...

  5. 值得关注的10个Python语言学习博客

    大家好,还记得我当时学习python的时候,我一直努力地寻找关于python的博客,但我发现它们的数量很少.这也是我建立这个博客的原因,向大家分享我自己学到的新知识.今天我向大家推荐10个值得我们关注 ...

  6. PAT 天梯赛 L1-020. 帅到没朋友 【STL】

    题目链接 https://www.patest.cn/contests/gplt/L1-020 思路 对于每个 K >= 2 的朋友圈,里面的所有 ID 都用 MAP 标记一下 对于每个 K = ...

  7. iOS 绘制漂亮的折线图

    效果图是这样的: 关键是在 基本策略 是描点 和 连线. 折线基础版本,我找到网上的第三方,UUChart . 特点是朴素,简单,扩展性强. 效果图重点是在折线要有阴影,于是 重点 放在 折线发散的阴 ...

  8. Bürkert 流体控制系统 (8611 型通用调节器)

    Type Description High-Tech Made EasyThe new universal controller eCONTROL Type 8611 brings an essent ...

  9. 跨平台移动开发 Adobe Edge制作HTML5圣诞音乐贺卡DEMO

    1.新建项目 2.添加背景,图片,音频 var au_to_play=new Audio(); au_to_play.src="audio/lap.mp3"; //指定文件名,这里 ...

  10. 主攻ASP.NET MVC4.0之重生:发邮箱激活验证

    导入Interop.jmail组件 using jmail;using System.Net.Mail; 点击下载源代码 Controller相关代码 public class SendEmailCo ...