11-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);
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 相机始终朝向某个物体的更多相关文章
- three.js 相机
图形学中的相机定义了三维空间到二维屏幕的投影方式,根据投影方式的不同,相机可分为 正交投影相机 与 透视投影相机. 正交投影相机 : 近处.远处的物体大小尺寸保持一致,常适用于工程制图.建模软件,如C ...
- jquery-1.11.1.js
每次想要使用这个js时,总是要到官网上下载,太麻烦,现在把它收录了 jquery-1.11.1.js /*! * jQuery JavaScript Library v1.11.1 * http ...
- [UE4]蓝图Get Control Rotation获取人物角色朝向,设置默认人物相机,朝向与controller绑定
具体应用:控制人物移动方向 也可以使用“CombineRotators”将角色控制器Z轴旋转90°,然后再取正面方向,达到跟“Get Right Vector”一样的效果: 设置关联人物朝向使用控制器 ...
- UE4中如何使物体始终朝向摄像头?
要使物体始终正面朝向摄像头需要用到一个关键节点:Find Look at Rotation 其中Start连接需要旋转的物体位置矢量,Target连接摄像头位置矢量 最后设置SetActorRotat ...
- 【three.js第六课】物体3D化
1.在[three.js第五课]的基础上引入AnaglyphEffect.js文件. 文件路径: three源码包中进入[examples]文件夹: 进入[js]文件夹: 进入[effects]文件夹 ...
- 11、js 数组详细操作方法及解析合集
js 数组详细操作方法及解析合集 前言 在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个api,在开发中也很容易 ...
- ajaxupload.js调用始终进入error回调
现象:脚本调用成功,文件上传也成功,但是始终进入error的回调函数. 1. ajaxfileupload.js jQuery.extend({ handleError: function( s, x ...
- three.js使用卷积法实现物体描边效果
法线延展法 网上使用法线延展法实现物体描边效果的文章比较多,这里不再描述. 但是这种方法有个缺点:当两个面的法线夹角差别较大时,两个面的描边无法完美连接.如下图所示: 卷积法 这里使用另一种方法卷积法 ...
- 11 (H5*) js第1天 基本数据类型、变量
目录 1: js的介绍 2:写js代码注意的地方 3:变量 4:变量的命名和作用 5:变量的类型 6:Number类型 7:string类型 8:类型转换 9:操作符号 复习 <script& ...
随机推荐
- ios 避免两个button同一时候被点击
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/superchaoxian/article/details/24631293 这个能够通过[btn ...
- 剑指offer 面试37题
面试37题: 题:序列化二叉树 题目:请实现两个函数,分别用来序列化和反序列化二叉树 解题思路:首先来看二叉树的序列化,二叉树的序列化就是采用前序遍历二叉树输出节点,再碰到左子节点或者右子节点为Non ...
- 剑指offer 面试40题
面试40题: 题目:最小的k个数 题:输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 解题代码一: # -*- coding ...
- Django——admin源码分析
在Django中,如果我们新建一个项目,只要在admin.py文件中注册,就可以对其相应的文件进行增删改查操作. 而我们在路由系统中只看到了一条信息:url(r'^admin/', admin.sit ...
- 【转】Python爬虫_示例
爬虫项目:爬取汽车之家新闻资讯 # requests+Beautifulsoup爬取汽车之家新闻 import requests from bs4 import BeautifulSoup res ...
- Android:日常学习笔记(9)———探究持久化技术
Android:日常学习笔记(9)———探究持久化技术 引入持久化技术 什么是持久化技术 持久化技术就是指将那些内存中的瞬时数据保存到存储设备中,保证即使在手机或电脑关机的情况下,这些数据仍然不会丢失 ...
- pyhton3 sys模块
Python常用模块之sys sys模块提供了一系列有关Python运行环境的变量和函数. 1 ). sys.stdin 标准输入流.2 ).sys.stdout 标准输出流.3 ). sys.std ...
- loadrunder脚本篇——文件读写操作
函数说明 函数原型: size_t fwrite( const void *buffer, size_t size, size_t count, FILE *file_pointer ); 参数说明 ...
- ANSI编码——代码页
详见wiki: http://zh.wikipedia.org/wiki/%E4%BB%A3%E7%A0%81%E9%A1%B5
- 开发自己的composer package
参考:https://laravel-china.org/articles/6652/learn-to-develop-their-own-composer-package-and-to-use-pa ...