虚拟现实技术及应用 three.js 实验一：绘制基本虚拟场景

发布时间：2021-03-09 来源：文档文库

小中大

字号：

手机查看

大学实验报告
2018 年 9 月 27 日

课程名称：虚拟现实技术及应用实验名称：实验一：绘制基本虚拟场景班级及学号：姓名：同组人：签名：指导教师：指导教师评定：

一、实验目的和要求
1.实验前须复习的课程内容：实验之前要复习WebGL的环境基本操作方法。 2.实验预习报告要求：实验预习报告要求有实验目的，实验内容，实验步骤。 3.实验要求：（1）对预习报告中的知识，完成实验指导书中全部实验要求内容。
（2）写出实验报告。报告要求：有实验目的，实验内容，实验步骤，实验小结，回答问题。
（3）通过配置WebStorm平台下WebGL的环境，熟悉Three.js这个三维图形引擎与WebStorm平台之间的关系。

二、实验内容和步骤 1.实验内容：
（1）学习了解Three.js引擎。（2）学习了解WebGL的环境。 2.实验具体步骤：（1）最终效果要求： 1.倾斜平面 2.设为蓝色背景色 3.模拟球体重力 4.球体设置为八面体
5.球体设置为半透明（附加题） 6.GUI控制物体位移（6、7、8选做） 7.GUI控制物体旋转（欧拉角） 8.控制增加删除模型（立方体、球体）

（2）具体实现代码：
1.plane.rotation.x = -0.7 * Math.PI;//改变倾斜角度系数，使平面能够倾斜适当角度
2.renderer.setClearColor(new THREE.Color(0x0000EE, 1.0;//改变设置颜色阈值，是背景呈蓝色
3.step += 0.04; //sphere.position.x = 20 + ( 10 * (Math.cos(step;
sphere.position.y = 2 -0.5*10*step*step;//根据物理上x=0.5gt²，修改y的距离即可模拟球体重力
4.var sphereGeometry = new THREE.SphereGeometry(4, 4, 2;//改变后两参数width和height的值即可形成一个八面体
5.var sphereGeometry = new THREE.SphereGeometry(4, 20, 20; var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff,transparent:true,opacity:0.5};//球体设置为半透明，transparent透明设为真，opacity透明系数设为0.5

6.移动
添加一下代码：
this.positionX=0.0; this.positionY=0.0; this.positionZ=0.0; 在以下代码之后：
var gui = new dat.GUI(; gui.add(controls, 'rotationSpeed', 0, 0.5; gui.add(controls, 'addsphere'; gui.add(controls, 'removesphere'; gui.add(controls, 'outputObjects'; gui.add(controls, 'numberOfObjects'.listen(; 添加下列代码：
gui.add(controls, 'positionX',-10,10; gui.add(controls, 'positionY',-10,10; gui.add(controls, 'positionZ',-10,10; 在scene.traverse(function (e里加： e.position.x=controls.positionX

《虚拟现实技术及应用 three.js 实验一：绘制基本虚拟场景.doc》

将本文的Word文档下载到电脑，方便收藏和打印

推荐度：

点击下载文档

文档为doc格式

相

关

案

例

虚拟现实技术及应用 three.js 实验一：绘制基本虚拟场景

相关推荐

推荐内容