Closed zhaoxiaomiao closed 2 years ago
It's hard to tell from a screenshot of a code, but here is a working example with three.js: https://jsfiddle.net/kovacsv/rzhq9gxj
Sorry, I can't open the website here. Can you send a demo of the compressed package? Thank you
从代码的屏幕截图中很难分辨,但这里有一个使用 three.js 的工作示例: https ://jsfiddle.net/kovacsv/rzhq9gxj
HTML:
<script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/occt-import-js@0.0.5/dist/occt-import-js.min.js"></script>
JS:
async function LoadGeometry (targetObject)
{
// init occt-import-js
const occt = await occtimportjs ();
// download a step file
let fileUrl = 'https://raw.githubusercontent.com/kovacsv/occt-import-js/main/test/testfiles/cax-if/as1_pe_203.stp';
let response = await fetch (fileUrl);
let buffer = await response.arrayBuffer ();
// read the imported step file
let fileBuffer = new Uint8Array (buffer);
let result = occt.ReadStepFile (fileBuffer);
// process the geometries of the result
for (let resultMesh of result.meshes) {
let geometry = new THREE.BufferGeometry ();
geometry.setAttribute ('position', new THREE.Float32BufferAttribute (resultMesh.attributes.position.array, 3));
if (resultMesh.attributes.normal) {
geometry.setAttribute ('normal', new THREE.Float32BufferAttribute (resultMesh.attributes.normal.array, 3));
}
geometry.setIndex (resultMesh.index.array)
let material = null;
if (resultMesh.color) {
const color = new THREE.Color (resultMesh.color[0], resultMesh.color[1], resultMesh.color[2]);
material = new THREE.MeshPhongMaterial ({ color: color, side: THREE.DoubleSide });
} else {
material = new THREE.MeshPhongMaterial ({ color: 0xcccccc, side: THREE.DoubleSide });
}
const mesh = new THREE.Mesh( geometry, material );
targetObject.add (mesh);
}
}
async function Load ()
{
const width = window.innerWidth;
const height = window.innerHeight;
const renderer = new THREE.WebGLRenderer ({ antialias: true });
renderer.setSize (width, height);
renderer.setClearColor (0xfafafa);
document.body.appendChild (renderer.domElement);
const camera = new THREE.PerspectiveCamera (45, width / height, 1.0, 100000.0);
camera.position.set (5000.0, 15000.0, 10000.0);
camera.up.set (0.0, 0.0, 1.0);
camera.lookAt (new THREE.Vector3 (0.0, 0.0, 0.0));
const scene = new THREE.Scene ();
const ambientLight = new THREE.AmbientLight (0x444444);
scene.add (ambientLight);
const directionalLight = new THREE.DirectionalLight (0x888888);
directionalLight.position.set (camera.position.x, camera.position.y, camera.position.z);
scene.add (directionalLight);
const mainObject = new THREE.Object3D ();
LoadGeometry (mainObject);
scene.add (mainObject);
renderer.setAnimationLoop ((time) => {
mainObject.rotation.x = time / 2000;
mainObject.rotation.y = time / 1000;
renderer.render (scene, camera);
});
}
Load ();
Hello, I read the STP file in your way and use three JS rendering, but the model is not displayed. What is the reason? The code is as follows. Please solve your doubts. Thank you