threejs学习05-OimoPhysics模型的物理特性

Henrik698

已于 2022-10-25 10:12:54 修改

阅读量317

点赞数

分类专栏： three js学习文章标签： javascript

于 2022-10-24 18:02:15 首次发布

本文链接：https://blog.csdn.net/m0_37755995/article/details/127494476

版权

threejs学习05-OimoPhysics模型的物理特性(DirectionalLight、HemisphereLight、InstancedMesh、BoxGeometry、MeshLambertMaterial、IcosahedronGeometry、OimoPhysics、PerspectiveCamera)

这次实现这个示例：
https://threejs.org/examples/#physics_oimo_instancing

依然是在vite项目中添加一个新的js，05-oimophysics.js:
在这里插入图片描述
调整main.js中的内容：

import './style.css'

// import './01-basic-three.js'
// import './02-spot-light-shadow.js'
// import './03-helper-gui.js'
// import './04-raycast.js'
import './05-oimophysics.js'

index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <!-- <div class="status">hello</div> -->
    <script type="module" src="/main.js"></script>
  </body>
</html>

05-oimophysics.js：

import * as THREE from 'three';
import {
    OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

//物理效果
import {
    OimoPhysics } from 'three/examples/jsm/physics/OimoPhysics';

let scene, camera, renderer;
let axesHelper, controls;
let hesLight, dirLight;
let plane, floor, boxes, spheres;
let physics;

let position = new THREE.Vector3(); //声明一个position的全局变量。

initRenderer();
initCamera();
initScene();

initLight();
initMeshes();