一、THREEJS 使用入门

JavaScript015

一、THREEJS 使用入门,第1张

1、THREEJS 官方网址： <u>https://threejs.org/。</u> threejs 通过封装WEBGL API 实现了在网页端直接进行三维3d模型渲染。应用场景包括：小游戏，在线展厅，DIY 互动等现代互联网应用，极具发展前景。

2、官方使用案例 https://threejs.org/examples/ ，可以直接套用。

以 <u>https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials.html</u> 为例，讲解如何使用Threejs构建自己的应用：

步骤一、新建html页面。

3、如何在vue中引入THREEJS

步骤一、新建threejs 组件，ZeusStage.vue

步骤二、调用ZeusStage.vue组件

three.js创建地图的方法：

1.定义html页面

<!DOCTYPE html>

<html>

<head>

<title>Three.js Step Tutorial</title>

<style>

 body {

  margin: 0px

  background-color: #fff

  overflow: hidden

 }

</style>

</head>

<body>

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

<script src="js/three-tut.js"></script>

</body>

</html>

2、编写动画脚本anotation.js

var camera定义相机

var scene定义场景画布

var renderer定义渲染入口

var mesh定义恢复

init()初始化画布

animate()开始动画

函数定义

function init() {

scene = new THREE.Scene()

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000)

var light = new THREE.DirectionalLight( 0xffffff )

light.position.set( 0, 1, 1 ).normalize()

scene.add(light)

var geometry = new THREE.CubeGeometry( 10, 10, 10)

var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } )

mesh = new THREE.Mesh(geometry, material )

mesh.position.z = -50

scene.add( mesh )

renderer = new THREE.WebGLRenderer()

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

document.body.appendChild( renderer.domElement )

window.addEventListener( 'resize', onWindowResize, false )

render()

}

function animate() {

mesh.rotation.x += .04

mesh.rotation.y += .02

render()

requestAnimationFrame( animate )

}

function render() {

renderer.render( scene, camera )

}

形状变换

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight

camera.updateProjectionMatrix()

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

render()

}

3、运行以上程序，效果如下：