当前位置:首页 » 《随便一记》 » 正文

three.js示例之旋转立方体_前端啤酒屋

16 人参与  2022年05月06日 14:50  分类 : 《随便一记》  评论

点击全文阅读


Three.js简单的旋转示例

感谢:b站老陈

在这里插入图片描述

//引入three.js 库
<script src="js/three.js"></script>
<body>
	<!-- 将在div里面输出画面 -->
	<div id="threejs-output"></div>
</body>
<script>
//具体three.js的代码
</script>

window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。

在这里插入图片描述

做一个简单的示例:

在这里插入图片描述

分步分析一下几个关键核心的代码:

1.场景scene

var scene = new THREE.Scene();

将某个元素加入到场景中(如坐标系)

// 显示三维坐标系
var axes = new THREE.AxisHelper(20)
// 添加坐标系到场景中
scene.add(axes);

2.相机Camera

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000)
// 定位相机,并且指向场景中心
camera.position.x = 30;
camera.position.y = 30;
camera.position.z = 30;
camera.lookAt(scene.position)

3.渲染器renderer

var renderer = new THREE.WebGLRenderer();
// 设置渲染器的初始颜色
renderer.setClearColor(new THREE.Color(0xeeeeee));
// 设置输出canvas画面的大小
renderer.setSize(window.innerWidth, window.innerHeight)
// 设置渲染物体阴影
renderer.shadowMapEnabled = true;
// 将渲染器输出添加html元素中
document.getElementById('webgl-output').appendChild(renderer.domElement);
renderer.render(scene, camera)

4.几何体Geometry 和 材质Material

//添加立方体
var boxGeometry = new THREE.BoxGeometry(4, 4, 4);

var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xff0000
})
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 0;
cube.position.y = 4;
cube.position.z = 2;
// 对象是否渲染到阴影贴图当中
cube.castShadow = true;
scene.add(cube)

添加球体类似

5.光源Light

// 创建聚光灯
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(130, 130, -130);
spotLight.castShadow = true;
spotLight.angle = Math.PI / 4;
spotLight.shadow.penumbra = 0.05
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.innerHeight = 1024;
// 添加聚光灯
scene.add(spotLight)

在这里插入图片描述

6.动效和鼠标控制

let T1 =new Date()
function render() {
		let T2 =new Date()
		let t = T2-T1;
		renderer.render(scene, camera)
		// 绕y轴0.01弧度
		cube.rotateY(0.01)
		window.requestAnimationFrame(render)
}

//循环请求动画帧
		window.requestAnimationFrame(render)

// 创建controls对象;
		var controls = new THREE.OrbitControls(camera, renderer.domElement)
// 监听控制器的鼠标事件,执行渲染内容
		controls.addEventListener('change', () => {
		renderer.render(scene, camera)
})

点击全文阅读


本文链接:http://zhangshiyu.com/post/39614.html

坐标系  添加  渲染  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 男友车祸断腿时,我和新欢在车内拥吻高分言情_陈行简江若***新书_小说后续在线阅读_无删减免费完结_
  • 完结文重生高考填报志愿时,我放任全班上大专好文分享列表_完结文重生高考填报志愿时,我放任全班上大专好文分享(颜禾晚宋津年叶淼淼)
  • 陆寒澈沈秋晚小说完本+外篇(相逢难逃别离)畅享阅读
  • 雪上春霜删减内容修复版本(温观意陆一然)_雪上春霜删减内容修复版本(温观意陆一然)
  • 骤雨淋落晚星(林晚星裴临川)全书浏览_骤雨淋落晚星全书浏览
  • 全书浏览重生高考填报志愿时我放任全班上大专+后续(叶淼淼宋津年颜禾晚)_重生高考填报志愿时我放任全班上大专+后续(叶淼淼宋津年颜禾晚)全书结局
  • 他的甜撩藏不住附加黎初谢时晏:结局+番外免费品鉴(他的甜撩藏不住)全本浏览阅读连载中
  • 全文他死遁后逼疯清冷女权臣+完结+后续(苏煜顾宛柔)列表_全文他死遁后逼疯清冷女权臣+完结+后续
  • 暑假毕业旅游,班花将我们身份证交给黑导游(江诗晗)全书浏览_暑假毕业旅游,班花将我们身份证交给黑导游全书浏览
  • 重生到高考前,我放任竹马为爱私奔新上热文_裴文远柳雨文远完结版_小说后续在线阅读_无删减免费完结_
  • 雨织离歌浮生浅节选_沈翊鸣苏之雨小姐完整文本_小说后续在线阅读_无删减免费完结_
  • 鬓边不是牡丹红精选(盛惟芳萧既明贺锦)_鬓边不是牡丹红精选盛惟芳萧既明贺锦

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1