819692539ccpphh - Mobile phone chassis 3D model

Glitch Help
1
手机端底盘3D模型 body { margin: 0; overflow: hidden; } #info { position: fixed; top: 10px; left: 10px; color: white; font-family: Arial; background: rgba(0,0,0,0.7); padding: 10px; border-radius: 5px; }
旋转/缩放操作模型
import * as THREE from 'https://unpkg.com/three@0.150.1/build/three.module.js'; import { OrbitControls } from 'https://unpkg.com/three@0.150.1/examples/jsm/controls/OrbitControls.js'; import { GLTFLoader } from 'https://unpkg.com/three@0.150.1/examples/jsm/loaders/GLTFLoader.js'; 
       // 初始化场景
       const scene = new THREE.Scene();
       const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
       const renderer = new THREE.WebGLRenderer({ antialias: true });
       renderer.setSize(window.innerWidth, window.innerHeight);
       renderer.setPixelRatio(window.devicePixelRatio * 0.8); // 降低分辨率提升性能
       document.body.appendChild(renderer.domElement);

       // 灯光设置
       scene.add(new THREE.AmbientLight(0xffffff, 0.5));
       const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
       directionalLight.position.set(5, 5, 5);
       scene.add(directionalLight);

       // 加载底盘模型
       const loader = new GLTFLoader();
       loader.load('/assets/chassis.glb', (gltf) => {
           const model = gltf.scene;
           model.position.set(0, -1, 0); // 调整模型位置
           scene.add(model);
       });

       // 手机触控交互
       const controls = new OrbitControls(camera, renderer.domElement);
       controls.enableDamping = true;  // 惯性滑动
       controls.dampingFactor = 0.05;
       controls.screenSpacePanning = false;
       controls.maxDistance = 10;
       controls.minDistance = 2;
       camera.position.set(3, 2, 5);

       // 响应式布局
       window.addEventListener('resize', () => {
           camera.aspect = window.innerWidth / window.innerHeight;
           camera.updateProjectionMatrix();
           renderer.setSize(window.innerWidth, window.innerHeight);
       });

       // 动画循环
       function animate() {
           requestAnimationFrame(animate);
           controls.update();
           renderer.render(scene, camera);
       }
       animate();
   </script>
2

I think you’ll need to change that /assets/chassis.glb url to be the https://cdn.glitch.global/...?v=... url that you get in the assets viewer

2 Likes