龙空技术网

threejs中监视器和过渡器的使用

少儿编程scratch 61

前言:

现在朋友们对“js监视器”大概比较珍视,同学们都需要知道一些“js监视器”的相关文章。那么小编同时在网络上网罗了一些关于“js监视器””的相关内容,希望姐妹们能喜欢,你们一起来了解一下吧!

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Three框架</title>

本文代码效果

<script src="js/Three.js"></script>

<script src="js/Stats.js"></script>

<script src="js/tween.min.js"></script>

<script src="js/dat.gui.js"></script>

<style type="text/css">

div#canvas-frame {

border: none;

cursor: pointer;

width: 100%;

height: 600px;

background-color: #EEEEEE;

}

</style>

<script>

var renderer

function initThree() {

width = document.getElementById('canvas-frame').clientWidth;

height = document.getElementById('canvas-frame').clientHeight;

renderer = new THREE.WebGLRenderer({

antialias : true

});

renderer.setSize(width, height);

document.getElementById('canvas-frame').appendChild(renderer.domElement);

renderer.setClearColor(0xFFFFFF, 1.0);

}

var star // 定义侦测变量

// 创建侦测函数

function initstar(){

star = new Stats() //创建侦测对象

star.domElement.style.position = 'absolute' // 对象的定位是绝对定位

star.domElement.style.left = '5px' // 窗体左边距5像素

star.domElement.style.top = '5px' // 窗体上边距5像素

document.getElementById('canvas-frame').appendChild(star.domElement)// 侦测对象添加到页面

}

//相机函数

var camera;

function initCamera() {

// 下面是透视相机的使用

camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);

// 下面是正投影相机的使用 (左边的距离, 右边的距离, 上边的距离, 下边的距离, 近平面, 远平面 )

// camera = new THREE.OrthographicCamera(window.innerWidth/-40, window.innerWidth/40, window.innerHeight/40, window.innerHeight/-40, 10, 1000 )

camera.position.x = 800;

camera.position.y = 800;

camera.position.z = 1000;

camera.up.x = 0;

camera.up.y = 10;

camera.up.z = 0;

camera.lookAt({

x : 0,

y : 0,

z : 0

});

}

// 场景函数

var scene;

function initScene() {

scene = new THREE.Scene();

}

// 灯光函数

var light;

function initLight() {

light = new THREE.AmbientLight(0xFFFFFF);

light.position.set(100, 100);

scene.add(light);

light = new THREE.PointLight(0x00FF00);

light.position.set(0, 0,300);

scene.add(light);

}

// 实物函数

var cube,mesh

function initObject() {

var geometry = new THREE.CylinderGeometry( 150,150,300,10);// 定义一个圆锥体,上面半径10, 下面半径150 高400 分成多少个点画圆

var material = new THREE.MeshLambertMaterial( { color:0xFF0000} );

mesh = new THREE.Mesh( geometry,material);

mesh.position = new THREE.Vector3(0,0,0);

scene.add(mesh);

}

//初始化过度器函数

function initTween(cube){

new TWEEN.Tween(cube.rotation)

// 改变相机的位置到400,用3秒时间,重复3+1次

// new TWEEN.Tween(a.position)

.to({y: 20}, 3000).repeat(3).start()

new TWEEN.Tween(cube.position)

// 改变相机的位置到400,用3秒时间,重复3+1次

// new TWEEN.Tween(a.position)

.to({x: 400}, 300).repeat(3).start()

}

// 创建UI界面函数

function createUI(){

var ShiJiao = function(){ // 要改变视角 先创建视角对象

this.fov = 45 // 默认视角为 45度

};

shijiao = new ShiJiao(); // 实例化一个视角对象

var gui = new dat.GUI(); // 实例化一个UI对象

gui.add(shijiao, 'fov', 0, 180).name("视角大小:") // UI界面中添加一个空间控制视角的大小(视角对象, 摄像机视角参数代号, 取值范围0-180) 的名字是:视角大小

}

function setCameraFov(fov){

camera.fov = fov

camera.updatePerspectiveCamera()

}

function changFov(){

setCameraFov(shijiao.fov)

}

// 主函数

function threeStart(a=mesh) {

initstar(); // 调用监视器函数

initThree(); // 调用初始化three

initCamera(); // 初始化相机

initScene(); // 初始化场景

initLight(); // 初始化灯光

initObject(); // 初始化物体

animation(); // 初始化动画函数

initTween(a=mesh) // 初始化过度器

createUI() // 创建UI界面

}

// 动画函数

function animation(b)

{

star.begin()

//renderer.clear();

TWEEN.update() // 更新过度器的数据

// camera.position.x += 0.1

renderer.render(scene, camera);

requestAnimationFrame(animation);

star.end();

}

</script>

</head>

<body onload="threeStart();">

<div id="canvas-frame"></div>

</body>

</html>

标签: #js监视器