Focus On The Field Of Industrial Automation And Provide Excellent Connection Solutions

Language:

English

Home / 测试

测试

Solutions - Connoder

Solution

Circular Connector For Industrial Automation

Circular Connectors For Pharmaceuticals Food

Circular Connectors For New Energy

Circular Connectors For Building Automation

Circular Connectors For Warehousing Logistics

productS

about

support

Please Send Your Message To Us

*Email

Name

Mobile Phone

*Title

*Content

Upload

Only supports .rar/.zip/.jpg/.png/.gif/.doc/.xls/.pdf, maximum 20MB.

Agree to use terms of service,Terms & Conditions

window.onload = function () { let scene, camera, renderer, controls; let rootGroup; init(); createCableSet(); document.getElementById("updateModel").onclick = createCableSet; // ----------------------------------------------- // 初始化 // ----------------------------------------------- function init() { const container = document.getElementById("preview3D"); scene = new THREE.Scene(); // 相机更高一点，避免看不见 camera = new THREE.PerspectiveCamera( 45, container.clientWidth / container.clientHeight, 0.1, 5000 ); camera.position.set(300, 200, 300); // renderer 支持透明背景 renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setClearColor(0x000000, 0); // 完全透明 container.appendChild(renderer.domElement); // 光源 const ambient = new THREE.AmbientLight(0xffffff, 1); scene.add(ambient); const dirLight = new THREE.DirectionalLight(0xffffff, 1); dirLight.position.set(150, 150, 150); scene.add(dirLight); // 控件 controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.maxDistance = 2000; controls.minDistance = 50; animate(); } // ----------------------------------------------- // 创建电缆 + M12 // ----------------------------------------------- function createCableSet() { // 清除旧模型 if (rootGroup) { scene.remove(rootGroup); } rootGroup = new THREE.Group(); // 用户参数 const len = Number(document.getElementById("cableLength").value) || 1000; const color = document.getElementById("cableColor").value; const cores = Number(document.getElementById("coreCount").value); // 电缆半径 const radius = 4 + cores * 0.6; // three.js 中缩小 10 倍显示 const dispLen = len / 10; // 电缆本体 const cableGeom = new THREE.CylinderGeometry(radius, radius, dispLen, 32); const cableMat = new THREE.MeshStandardMaterial({ color: color, roughness: 0.4, metalness: 0.1 }); const cable = new THREE.Mesh(cableGeom, cableMat); cable.rotation.z = Math.PI / 2; rootGroup.add(cable); // M12 连接器简化模型 function createM12() { const g = new THREE.CylinderGeometry(radius + 3, radius + 3, 18, 32); const m = new THREE.MeshStandardMaterial({ color: "#bbbbbb", metalness: 0.7, roughness: 0.2 }); const mesh = new THREE.Mesh(g, m); return mesh; } const head1 = createM12(); head1.position.x = -dispLen / 2 - 12; const head2 = createM12(); head2.position.x = dispLen / 2 + 12; rootGroup.add(head1); rootGroup.add(head2); scene.add(rootGroup); // 居中 rootGroup.position.set(0, 0, 0); } // ----------------------------------------------- // 动画循环 // ----------------------------------------------- function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } };