当前位置：网站首页>Three. JS introductory learning notes 19: how to import FBX static model
Three. JS introductory learning notes 19: how to import FBX static model
2022-07-07 15:51:00 【Jiang Duoduo_ Mostly Harmless 】
Reference material ：https://www.jianshu.com/p/906072e60197
1. stay JS The following two files are introduced in
<script type="text/javascript" src="js/FBXLoader.js"></script>
<script type="text/javascript" src="js/inflate.min.js"></script>
2. introduce fbx file ,fbx The file is placed in the same level folder of the page 
var loader = new THREE.FBXLoader();
loader.load("fbx/dijifbx.FBX", function(objectBottom) {
objectBottom.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
objectBottom.scale.multiplyScalar(0.5);//0.5 Multiple size
objectBottom.position.set(0,0,0);
objectBottom.rotation.y = -Math.PI;// rotate 180 degree
scene.add(objectBottom);
});
Complete code record
<!DOCTYPE html>
<html lang="en">
<head>
<title>3D</title>
<meta charset="utf-8">
<!-- The adaptive -->
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script type="text/javascript" src="js/OrbitControls.js"></script>
<script type="text/javascript" src="js/FBXLoader.js"></script>
<script type="text/javascript" src="js/inflate.min.js"></script>
<script type="text/javascript" src="js/DirectionalLightHelper.js"></script>
<script>
var stats, light;
var camera, scene, raycaster, renderer;
var mouse = new THREE.Vector2(), INTERSECTED;// Intersecting
var radius = 100, theta = 0;
init();
animate();
function init() {
// init scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(12, 13, 12);
// camera.lookAt( scene.position );
camera.lookAt( new THREE.Vector3(0, 0, 0));
scene.add(camera);
//light
light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 5, 10, 16 ).normalize();
// Vector attribute vector is converted to unit vector , Set the direction to be the same as the original vector , The length is 1
light.intensity=1.2;// Strength
scene.add(light);
// base
var loader = new THREE.FBXLoader();
loader.load("fbx/dijifbx.FBX", function(objectBottom) {
objectBottom.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
objectBottom.scale.multiplyScalar(0.5);//3 Multiple size
// var mesh1 = objectBottom;
objectBottom.position.set(0,0,0);
objectBottom.rotation.y = -Math.PI;// rotate 180 degree
scene.add(objectBottom);
});
// Machine tool
var loader = new THREE.FBXLoader();
loader.load("fbx/5000fbxnew.FBX", function(object1) {
object1.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
object1.scale.multiplyScalar(0.5);//3 Multiple size
// var mesh1 = objectBottom;
object1.position.set(-3,-4,-3);
object1.rotation.x = -Math.PI*0.5;// rotate 180 degree
object1.rotation.z = Math.PI;
scene.add(object1);
});
var loader = new THREE.FBXLoader();
loader.load("fbx/7000fbxnew.FBX", function(object2) {
object2.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
object2.scale.multiplyScalar(0.5);//3 Multiple size
// var mesh1 = objectBottom;
object2.position.set(4,-5.8,-3);
object2.rotation.x = -Math.PI*0.5;// rotate 180 degree
object2.rotation.z = Math.PI;
scene.add(object2);
});
// Van
var loader = new THREE.FBXLoader();
loader.load("fbx/xuanzhuanbanyuenche.FBX", function(object3) {
object3.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
object3.scale.multiplyScalar(0.5);//3 Multiple size
// var mesh1 = objectBottom;
object3.position.set(0,0,4.2);
// objectBottom.rotation.x = -Math.PI;// rotate 180 degree
scene.add(object3);
});
// ray
raycaster = new THREE.Raycaster();
/* var raycaster = new THREE.Raycaster(); var mouseVector = new THREE.Vector3();*/
//renderer
renderer = new THREE.WebGLRenderer({
antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
// monitor
document.addEventListener( "mousedown", onDocumentMouseDown, false );
// Window changes
window.addEventListener( "resize", onWindowResize, false );
// plug-in unit
var controls = new THREE.OrbitControls( camera, renderer.domElement );//camera and render The variable of is consistent with the variable set by the camera and renderer
// If you use animate When the method is used , Delete this function
//controls.addEventListener( 'change', render );
// Make the animation rotate or damp when cycling Does the meaning have inertia
controls.enableDamping = true;
// Dynamic damping coefficient It's the mouse drag rotation sensitivity
//controls.dampingFactor = 0.25;
// Can I zoom
controls.enableZoom = true;
// Whether to rotate automatically
controls.autoRotate = true;
// Set the maximum distance from the camera to the origin
controls.minDistance = 1;
// Set the maximum distance from the camera to the origin
controls.maxDistance = 200;
// Whether to turn on right-click drag and drop
controls.enablePan = true;
}//function end
// Window changes
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
// camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
// Coordinate transformation
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// Update the ray with camera and mouse position
raycaster.setFromCamera( mouse, camera );
// Calculate the focus of objects and rays
var intersects = raycaster.intersectObjects( scene.children ,true);
if ( intersects.length > 0 ) {
// When there are objects
if ( INTERSECTED != intersects[ 0 ].object ) {
// The last selection is not equal to the current selection , It's time to replace ,intersects[ 0 ] Is the current selection At the front , It is automatically sorted
if ( INTERSECTED )
if( INTERSECTED.material .length==undefined){
INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );// The last selected material should be replaced with the original material
}
INTERSECTED = intersects[ 0 ].object;
if( INTERSECTED.material .length==undefined){
INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();// Save the current materials
INTERSECTED.material.emissive.setHex( 0xff0000 );// Color change
}
}
} else {
// When selecting the blank space
//
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = null;
}
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>
边栏推荐
- When opening the system window under UE4 shipping, the problem of crash is attached with the plug-in download address
- Detailed explanation of Cocos creator 2.4.0 rendering process
- Syntax of generator function (state machine)
- After UE4 is packaged, mesh has no material problem
- Runnable是否可以中断
- Database exception resolution caused by large table delete data deletion
- Virtual memory, physical memory /ram what
- [wechat applet] Chapter (5): basic API interface of wechat applet
- 航天宏图信息中标乌鲁木齐某单位数据库系统研发项目
- Vite path alias @ configuration
猜你喜欢
![[quickstart to Digital IC Validation] 20. Basic syntax for system verilog Learning 7 (Coverage Driven... Including practical exercises)](/img/d3/cab8a1cba3c8d8107ce4a95f328d36.png)
[quickstart to Digital IC Validation] 20. Basic syntax for system verilog Learning 7 (Coverage Driven... Including practical exercises)
webgl_ Enter the three-dimensional world (2)
Vite path alias @ configuration
LeetCode1_ Sum of two numbers
【数字IC验证快速入门】29、SystemVerilog项目实践之AHB-SRAMC（9）（AHB-SRAMC SVTB Overview）
2. Heap sort "hard to understand sort"
Three. JS introductory learning notes 00: coordinate system, camera (temporarily understood)
HW primary flow monitoring, what should we do
C4D learning notes 3- animation - animation rendering process case
Annexb and avcc are two methods of data segmentation in decoding
随机推荐
15. Using the text editing tool VIM
LeetCode1_ Sum of two numbers
【数字IC验证快速入门】19、SystemVerilog学习之基本语法6（线程内部通信...内含实践练习）
Points for attention in porting gd32 F4 series programs to gd32 F3 series
Numpy -- epidemic data analysis case
TS typescript type declaration special declaration field number is handled when the key key
[quick start of Digital IC Verification] 22. Ahb-sramc of SystemVerilog project practice (2) (Introduction to AMBA bus)
【数字IC验证快速入门】25、SystemVerilog项目实践之AHB-SRAMC（5）（AHB 重点回顾，要点提炼）
【數字IC驗證快速入門】26、SystemVerilog項目實踐之AHB-SRAMC（6）（APB協議基本要點）
Syntaxhighlight highlights the right scroll bar
How to create Apple Developer personal account P8 certificate
Use cpolar to build a business website (2)
UE4 exports the picture + text combination diagram through ucanvasrendertarget2d
Wireless sensor networks -- ZigBee and 6LoWPAN
LeetCode2_ Add two numbers
招标公告：盘锦市人民医院盘锦医院数据库维保项目
航天宏图信息中标乌鲁木齐某单位数据库系统研发项目
When opening the system window under UE4 shipping, the problem of crash is attached with the plug-in download address
Three. JS introductory learning notes 07: external model import -c4d to JSON file for web pages -fbx import
Postman generate timestamp, future timestamp