博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
three.js入门(三):点光源+动画的实现
阅读量:6443 次
发布时间:2019-06-23

本文共 874 字,大约阅读时间需要 2 分钟。

hot3.png

与前几个教程类似,场景和相机等设置就不再重复说明了。之前的博客中有记录。这里只列出新学的内容。

1、圆柱体(圆锥体)的初始化

function initObject() {    var geometry = new THREE.CylinderGeometry(0, 10, 50);    var material = new THREE.MeshLambertMaterial({        color: 0x483D8B    });    cylinder = new THREE.Mesh(geometry, material);    cylinder.rotation.x = 0.15 * Math.PI;    scene.add(cylinder);}

new THREE.CylinderGeometry的三个参数含义依次为:圆柱体上平面的圆的半径、圆柱体下平面的圆的半径、圆柱体的长。

2、点光源

var light;function initLight() {    light = new THREE.PointLight(0xffffff);    light.position.set(0, 0, 200);    scene.add(light);}

点光源的使用可以使得3D图形具有立体感,主要体现在阴影的效果方面,如下图:

3、动画效果的实现。

学过物理的都知道,物体的运动有个参照系的概念,这里通过修改相机的位置,调整与几何体之间的距离形成动画效果。

function animation3D() {    cylinder.position.x -= 0.2;    renderer.render(scene, camera);    requestAnimationFrame(animation3D);}

修改相机的位置后,需要重新渲染,否则不生效。不断循环修改相机的位置,即可形成动画的效果。

转载于:https://my.oschina.net/u/4108765/blog/3059559

你可能感兴趣的文章
数组排序 和 二分法查找
查看>>
MongoDB C Driver Building on Windows
查看>>
备忘zookeeper(单机+伪集群+集群)
查看>>
无需编译、快速生成 Vue 风格的文档网站
查看>>
AtomicBoolean介绍与使用
查看>>
Elasticsearch之curl删除
查看>>
Apache Spark 内存管理详解(转载)
查看>>
JS隐藏号码中间4位
查看>>
windows下安装Rabbitmq详解
查看>>
HTTP协议中POST、GET、HEAD、PUT等请求方法以及一些常见错误
查看>>
SQL Server索引 - 索引(物化)视图 <第九篇>
查看>>
[原创]FineUI秘密花园(一) — 为什么选择FineUI?
查看>>
这一文让你彻底理解Spring框架的意义
查看>>
消息中间件Kafka与RabbitMQ谁更胜一筹?
查看>>
CanisMinor 微信小程序工程
查看>>
手机拍照,调取相册 裁剪,上传
查看>>
当移动数据分析需求遇到Quick BI
查看>>
八皇后,回溯与递归(Python实现)
查看>>
程序员的微创业
查看>>
什么是以太坊
查看>>