当前位置：网站首页>Use threejs to create geometry and add materials, lights, shadows, animations, and axes
Use threejs to create geometry and add materials, lights, shadows, animations, and axes
2022-07-05 04:00:00 【Zuo Ben】
1, Introduce ：
This example uses r95 edition Three.js library . You will create a scene and add geometry , Add geometry dynamically , Delete Geometry , Add materials to geometry 、 The light source 、 Shadows, etc , Get all objects in the scene , Add axis . The renderings are as follows ：
The introduction of the file ：
three.js // threejs It's based on WebGL API Advanced based on API
dat.gui.js // dat.GUI Provide operation interface , Easy to debug
OrbitControls.js // Track controller , Used to control the rotation and translation of objects in the scene
Description of main components ：
The camera ： Decide what needs to be rendered on the screen
Renderers ： Based on camera and scene , Call the underlying layer api Perform drawing work
object ： They are the main rendered objects , Like a square 、 sphere , Axis
2, Sample source code ：
<!DOCTYPE html>
<html>
<head>
<title> Use threejs Create geometry add axis material shadow animation </title>
<script type="text/javascript" src="libs/three.js"></script>
<script type="text/javascript" src="libs/dat.gui.js"></script>
<script type="text/javascript" src="libs/OrbitControls.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="dom"></div>
<script type="text/javascript">
var camera;
var renderer;
function init() {
// Create a scene , It will contain all our elements , Like an object , Cameras and lights .
var scene = new THREE.Scene();
// Create a camera , It defines where we are looking
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// Aim the camera at the center of the scene
camera.position.x = 10;
camera.position.y = 50;
camera.position.z = 90;
camera.lookAt(scene.position);
var orbit = new THREE.OrbitControls(camera);
// Create a renderer and set the size ,WebGLRenderer The computer graphics card will be used to render the scene
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth, window.innerHeight);
// Setting up the renderer requires shadow effects
renderer.shadowMapEnabled = true;
// Display the coordinate axis on the screen
var axes = new THREE.AxisHelper(100);
scene.add(axes);
// Add planes to the scene
var plane = createPlaneGeometryBasicMaterial();
scene.add(plane);
// Add the cube to the scene
var cube = createBoxGeometryLambertMaterial();
scene.add(cube);
// Add a sphere to the scene
var sphere = createSphereGeometryLambertMaterial();
scene.add(sphere);
// Add light to shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
// Set the light source that produces shadows
spotLight.castShadow = true;
spotLight.shadowCameraVisible = true;
scene.add(spotLight);
// Add the output of the renderer to HTML Elements
document.getElementById("dom").appendChild(renderer.domElement);
// Use GUI Debug library
var controls = new function () {
// Set initial value
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03;
this.numberOfObjects = scene.children.length;
// Randomly generate a cube
this.addCube = function () {
// Add the cube to the scene
scene.add(createBoxGeometryLambertMaterialRandom());
// Update the number of objects in the interface
this.numberOfObjects = scene.children.length;
};
// Remove objects from the scene , Remove the last object added to the scene
this.removeCube = function () {
// Get all objects in the scene
var allChildren = scene.children;
var lastObject = allChildren[allChildren.length - 1];
// Remove only THREE.Mesh object
if (lastObject instanceof THREE.Mesh && lastObject != plane && lastObject != cube && lastObject != sphere) {
scene.remove(lastObject);
// Update the number of objects in the interface
this.numberOfObjects = scene.children.length;
}
};
// Print all objects in the scene
this.outputObjects = function () {
console.log(scene.children);
}
};
var gui = new dat.GUI();
// Set the value range of two variables
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'bouncingSpeed', 0, 0.5);
// Add event
gui.add(controls, 'addCube');
gui.add(controls, 'removeCube');
gui.add(controls, 'outputObjects');
// Listening variables
gui.add(controls, 'numberOfObjects').listen();
// Start animation
renderScene();
// Create a cube of random size and color
function createBoxGeometryLambertMaterialRandom() {
var cubeSize = Math.ceil((Math.random() * 3));
// Create a cube and set the size
var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
// MeshLambertMaterial Set the material
var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// Set the object to cast shadows
cube.castShadow = true;
// Set the name of the cube
cube.name = "cube-" + scene.children.length;
// Set cube position
cube.position.x = -30 + Math.round((Math.random() * 60));
cube.position.y = Math.round((Math.random() * 5));
cube.position.z = -20 + Math.round((Math.random() * 20));
return cube;
}
// Create a MeshLambertMaterial Cube of material
function createBoxGeometryLambertMaterial() {
// Create a cube and set the size
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
// MeshLambertMaterial Set the material
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// Set the object to cast shadows
cube.castShadow = true;
// Set cube position
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
return cube;
}
// Create a cube of base material
function createBoxGeometryBasicMaterial() {
// Create a cube and set the size
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
// MeshBasicMaterial（ The base material will not react to the light source, and will only render with the specified color ）
var cubeMaterial = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// Set cube position
cube.position.x = -10;
cube.position.y = 3;
cube.position.z = 0;
return cube;
}
// Create a plane
function createPlaneGeometryBasicMaterial() {
// Create the ground plane and set the size
var planeGeometry = new THREE.PlaneGeometry(100, 70);
var planeMaterial = new THREE.MeshBasicMaterial({
color: 0xcccccc
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// Set accept shadows
plane.receiveShadow = true;
// Set the plane position and rotate
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
return plane;
}
// Create a spherical geometry
function createSphereGeometryLambertMaterial() {
// Create a sphere
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
// var sphereMaterial = new THREE.MeshBasicMaterial({
// color: 0x7777ff,
// wireframe: true
// });
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// Set the object to cast shadows
sphere.castShadow = true;
// Location range
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
return sphere;
}
// Animation rendering
var step = 0;
function renderScene() {
// Traverse all sub objects in the scene
scene.traverse(function (e) {
if (e instanceof THREE.Mesh && e != sphere && e != plane) {
// Rotate the cube around its axis
e.rotation.x += controls.rotationSpeed;
e.rotation.y += controls.rotationSpeed;
e.rotation.z += controls.rotationSpeed;
}
});
orbit.update();
// Rotate the cube around its axis
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.z += controls.rotationSpeed;
// Bounce the ball up and down
step += controls.bouncingSpeed;
sphere.position.x = 20 + ( 10 * (Math.cos(step)));
sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));
// Use requestAnimationFrame Function to render
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
// Rendered scenes
renderer.render(scene, camera);
}
window.onload = init;
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Listen for resizing events
window.addEventListener('resize', onResize, false);
</script>
</body>
</html>
If you need a complete code, please leave a message or contact me on wechat ：1171053128
边栏推荐
- An elegant program for Euclid‘s algorithm
- 深度学习——LSTM基础
- Rome链分析
- A brief introduction to the behavior tree of unity AI
- [untitled]
- Get to know MySQL connection query for the first time
- [C language] address book - dynamic and static implementation
- Differences among 10 addressing modes
- 特殊版:SpreadJS v15.1 VS SpreadJS v15.0
- [array]566 Reshape the matrix - simple
猜你喜欢
![[web source code code code audit method] audit skills and tools](/img/7c/2c26578da084b3cd15d8f252b0e132.png)
[web source code code code audit method] audit skills and tools
ActiveReportsJS 3.1 VS ActiveReportsJS 3.0
Clickhouse物化视图
在线文本行固定长度填充工具
What is test development? Why do so many companies hire test developers now?
Pyqt pyside custom telescopic menu bar sharing (including tutorial)
【web审计-源码泄露】获取源码方法，利用工具
The new project Galaxy token just announced by coinlist is gal
【软件逆向-分析工具】反汇编和反编译工具
UI自动化测试从此告别手动下载浏览器驱动
随机推荐
It took two nights to get Wu Enda's machine learning course certificate from Stanford University
What is the reason why the webrtc protocol video cannot be played on the easycvr platform?
Timing manager based on C ＃
【刷题】BFS题目精选
JWT漏洞复现
[wp][introduction] brush weak type questions
glibc strlen 实现方式分析
【软件逆向-分析工具】反汇编和反编译工具
特殊版:SpreadJS v15.1 VS SpreadJS v15.0
天干地支纪年法中为什么是60年一个轮回,而不是120年
ClickPaaS低代码平台
Clickhouse materialized view
Redis之Jedis如何使用
How does the applet solve the rendering layer network layer error?
Nmap使用手册学习记录
[wp]bmzclub几道题的writeup
【web审计-源码泄露】获取源码方法，利用工具
Operation flow of UE4 DMX and grandma2 onpc 3.1.2.5
UE4 DMX和grandMA2 onPC 3.1.2.5的操作流程
阿里云ECS使用cloudfs4oss挂载OSS