当前位置:网站首页>Use threejs to create geometry, dynamically add geometry, delete geometry, and add coordinate axes
Use threejs to create geometry, dynamically add geometry, delete geometry, and add coordinate 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 , 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 and add axes </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 = createBoxGeometryBasicMaterial();
scene.add(cube);
// Add a sphere to the scene
var sphere = createSphereGeometryLambertMaterial();
scene.add(sphere);
// Add the output of the renderer to HTML Elements
document.getElementById("dom").appendChild(renderer.domElement);
// Use GUI Debug library
var controls = new function () {
this.numberOfObjects = scene.children.length;
// Randomly generate a cube
this.addCube = function () {
// Add the cube to the scene
scene.add(createBoxGeometryLambertMaterial());
// 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();
// 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 createBoxGeometryLambertMaterial() {
var cubeSize = Math.ceil((Math.random() * 3));
// Create a cube and set the size
var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
// MeshBasicMaterial Set the material
var cubeMaterial = new THREE.MeshBasicMaterial({
color: Math.random() * 0xffffff,
wireframe: true // linear
});
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 cube of base material
function createBoxGeometryBasicMaterial() {
// Create a cube and set the size
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true // linear
});
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 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 // linear
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// Location range
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
return sphere;
}
function renderScene() {
orbit.update();
// Use requestAnimationFrame Function to render
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
// Rendered scenes
renderer.render(scene, camera);
}
window.onload = init;
// Modify the scene as the form changes
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Listen for form 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
边栏推荐
猜你喜欢
On the day 25K joined Tencent, I cried
UI自動化測試從此告別手動下載瀏覽器驅動
The new project Galaxy token just announced by coinlist is gal
EasyCVR更改录像存储路径,不生成录像文件如何解决?
IronXL for .NET 2022.6
我国算力规模排名全球第二:计算正向智算跨越
Online sql to excel (xls/xlsx) tool
It took two nights to get Wu Enda's machine learning course certificate from Stanford University
This article takes you to understand the relationship between the past and present of Bi and the digital transformation of enterprises
在线文本行固定长度填充工具
随机推荐
[array]566 Reshape the matrix - simple
Excuse me, my request is a condition update, but it is blocked in the buffer. In this case, can I only flush the cache every time?
Containerization Foundation
灵魂三问:什么是接口测试,接口测试怎么玩,接口自动化测试怎么玩?
Multimedia query
【PHP特性-变量覆盖】函数的使用不当、配置不当、代码逻辑漏洞
About the recent experience of writing questions
How does the applet solve the rendering layer network layer error?
ABP vNext microservice architecture detailed tutorial - distributed permission framework (Part 1)
ActiveReportsJS 3.1 VS ActiveReportsJS 3.0
PlasticSCM 企业版Crack
输入的查询SQL语句,是如何执行的?
On the day 25K joined Tencent, I cried
特殊版:SpreadJS v15.1 VS SpreadJS v15.0
About authentication services (front and back, login, registration and exit, permission management)
IronXL for .NET 2022.6
ABP vNext microservice architecture detailed tutorial - distributed permission framework (Part 2)
Soul 3: what is interface testing, how to play interface testing, and how to play interface automation testing?
企业级:Spire.Office for .NET:Platinum|7.7.x
[PHP features - variable coverage] improper use, improper configuration and code logic vulnerability of the function