当前位置:网站首页>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>
边栏推荐
- Mesh merging under ue4/ue5 runtime
- 尤雨溪,来了!
- Detailed explanation of Cocos creator 2.4.0 rendering process
- 【数字IC验证快速入门】19、SystemVerilog学习之基本语法6(线程内部通信...内含实践练习)
- The significance of XOR in embedded C language
- OpenGL's distinction and understanding of VAO, VBO and EBO
- After UE4 is packaged, mesh has no material problem
- Align individual elements to the right under flex layout
- TS typescript type declaration special declaration field number is handled when the key key
- Database exception resolution caused by large table delete data deletion
猜你喜欢
Annexb and avcc are two methods of data segmentation in decoding
Yunxiaoduo software internal test distribution test platform description document
从 1.5 开始搭建一个微服务框架链路追踪 traceId
Getting started with webgl (2)
LeetCode3_ Longest substring without duplicate characters
10 schemes to ensure interface data security
A wave of open source notebooks is coming
HPDC smart base Talent Development Summit essay
【數字IC驗證快速入門】26、SystemVerilog項目實踐之AHB-SRAMC(6)(APB協議基本要點)
numpy--数据清洗
随机推荐
招标公告:2022年云南联通gbase数据库维保公开比选项目(第二次)比选公告
Ue4/ue5 multi thread development attachment plug-in download address
[quick start of Digital IC Verification] 20. Basic grammar of SystemVerilog learning 7 (coverage driven... Including practical exercises)
【数字IC验证快速入门】26、SystemVerilog项目实践之AHB-SRAMC(6)(APB协议基本要点)
【数字IC验证快速入门】19、SystemVerilog学习之基本语法6(线程内部通信...内含实践练习)
从 1.5 开始搭建一个微服务框架链路追踪 traceId
TS as a general cache method
讲师征集令 | Apache SeaTunnel(Incubating) Meetup 分享嘉宾火热招募中!
The "go to definition" in VS2010 does not respond or prompts the solution of "symbol not found"
【数字IC验证快速入门】29、SystemVerilog项目实践之AHB-SRAMC(9)(AHB-SRAMC SVTB Overview)
nodejs package. JSON version number ^ and~
航运船公司人工智能AI产品成熟化标准化规模应用,全球港航人工智能/集装箱人工智能领军者CIMC中集飞瞳,打造国际航运智能化标杆
Using eating in cocos Creator
postman生成时间戳,未来时间戳
[quick start for Digital IC Validation] 26. Ahb - sramc (6) for system verilog project practice (Basic Points of APB Protocol)
[markdown grammar advanced] make your blog more exciting (IV: set font style and color comparison table)
如何在shell中实现 backspace
Three. JS introductory learning notes 18: how to export JSON files with Blender
Android -- jetpack: the difference between livedata setValue and postvalue
The significance of XOR in embedded C language