当前位置：首页 > news >正文

threeJs实现裸眼3D小狗

news 2025/7/1 17:21:42

一、实现效果

使用threeJs实现裸眼3D小狗，效果如下，其实如果将小狗换成建模小狗，效果更好，这个是模拟了一只小狗。

二、实现代码

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>星空小狗</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    <script>
        // 初始化场景、相机和渲染器
        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.setClearColor(0x000000); // 黑色背景
        document.body.appendChild(renderer.domElement);

        // 添加星空背景
        function createStarField() {
            const starsGeometry = new THREE.BufferGeometry();
            const starCount = 5000;
            const positions = new Float32Array(starCount * 3);

            for(let i = 0; i < starCount * 3; i += 3) {
                positions[i] = (Math.random() - 0.5) * 2000;
                positions[i+1] = (Math.random() - 0.5) * 2000;
                positions[i+2] = (Math.random() - 0.5) * 2000;
            }

            starsGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
            const starsMaterial = new THREE.PointsMaterial({
                color: 0xFFFFFF,
                size: 0.7,
                transparent: true
            });
            const starField = new THREE.Points(starsGeometry, starsMaterial);
            scene.add(starField);
        }
        createStarField();

        // 光源配置
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(0, 100, 50);
        scene.add(directionalLight);

        // 创建小狗模型
        function createDog() {
            const dog = new THREE.Group();

            // 身体
            const bodyGeometry = new THREE.CylinderGeometry(1, 1, 2, 8);
            const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 });
            const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
            body.rotation.z = Math.PI/2;
            dog.add(body);

            // 头部
            const headGeometry = new THREE.SphereGeometry(0.8);
            const head = new THREE.Mesh(headGeometry, bodyMaterial);
            head.position.set(1.5, 0, 0);
            dog.add(head);

            // 眼睛
            const eyeGeometry = new THREE.SphereGeometry(0.1);
            const eyeMaterial = new THREE.MeshPhongMaterial({ color: 0x000000 });
            const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
            const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
            leftEye.position.set(0.7, 0.3, 0.3);
            rightEye.position.set(0.7, 0.3, -0.3);
            head.add(leftEye, rightEye);

            // 鼻子
            const nose = new THREE.Mesh(
                new THREE.SphereGeometry(0.2),
                new THREE.MeshPhongMaterial({ color: 0x000000 })
            );
            nose.position.set(0.7, 0, 0);
            head.add(nose);

            // 耳朵
            const earGeometry = new THREE.ConeGeometry(0.3, 0.8, 8);
            const earMaterial = new THREE.MeshPhongMaterial({ color: 0x4B3621 });
            const leftEar = new THREE.Mesh(earGeometry, earMaterial);
            const rightEar = new THREE.Mesh(earGeometry, earMaterial);
            leftEar.position.set(1.2, 0.6, 0.4);
            rightEar.position.set(1.2, 0.6, -0.4);
            leftEar.rotation.z = -0.3;
            rightEar.rotation.z = 0.3;
            dog.add(leftEar, rightEar);

            // 腿
            const legGeometry = new THREE.CylinderGeometry(0.2, 0.2, 1);
            const legs = [
                [0.5, -1.2, 0.5],   // 前左
                [0.5, -1.2, -0.5],  // 前右
                [-0.5, -1.2, 0.5],  // 后左
                [-0.5, -1.2, -0.5]  // 后右
            ];
            legs.forEach(pos => {
                const leg = new THREE.Mesh(legGeometry, bodyMaterial);
                leg.position.set(...pos);
                dog.add(leg);
            });

            // 尾巴
            const tailGeometry = new THREE.CylinderGeometry(0.1, 0.05, 1);
            const tail = new THREE.Mesh(tailGeometry, bodyMaterial);
            tail.position.set(-1.2, -0.5, 0);
            tail.rotation.z = -0.5;
			tail.rotation.x = 10;
            dog.add(tail);

            return dog;
        }

        const dog = createDog();
        scene.add(dog);

        // 相机初始位置
        camera.position.set(0, 3, 8);
        camera.lookAt(0, 0, 0);

        // 轨道控制器
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            
            // 尾巴摆动
            dog.children[8].rotation.x = Math.sin(Date.now() * 0.005) * 0.5 - 0.5;
            
            controls.update();
            renderer.render(scene, camera);
        }

        // 窗口自适应
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        animate();
    </script>
</body>
</html>

这个示例创建了一个由基本几何体组成的卡通风格3D小狗，包含以下特征：

使用圆柱体作为身体和四肢
球体作为头部
圆锥体作为耳朵
黑色小球作为鼻子,眼睛
简单的摇尾巴动画
支持鼠标控制视角（旋转、缩放）
响应式布局（自动适应窗口大小）

使用方法：

将代码保存为HTML文件
用现代浏览器打开
你可以通过鼠标：
- 左键拖动旋转视角
- 右键拖动平移视角
- 滚轮缩放

可以调整的部分：

颜色值（修改各个材质的color参数）
几何体尺寸（修改各个Geometry的参数）
动画效果（修改animate函数中的变换参数）
光照参数（调整光源位置和强度）

要创建更逼真的模型，可以考虑：

使用更复杂的几何体
添加纹理贴图
使用3D建模软件创建模型后导入
添加骨骼动画系统
增加更多细节（眼睛、毛发等）

三、重点代码片段讲解

片段1：小狗的组(group)创建与部件组合

function createDog() {
    const dog = new THREE.Group();

    // 身体 (圆柱体)
    const bodyGeometry = new THREE.CylinderGeometry(1, 1, 2, 8);
    const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 });
    const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
    body.rotation.z = Math.PI/2; // 让圆柱体横置
    dog.add(body);

    // 头部 (球体)
    const head = new THREE.Mesh(
        new THREE.SphereGeometry(0.8),
        new THREE.MeshPhongMaterial({ color: 0x8B4513 })
    );
    head.position.set(1.5, 0, 0); // 向右偏移
    dog.add(head);

    // 其他部件...
    return dog;
}

重点解析：

组(Group)对象：
- THREE.Group() 创建了一个空容器，用于组合所有小狗部件
- 类似于HTML中的<div>容器，可以统一控制所有子元素的位置/旋转/缩放
坐标系操作：
- body.rotation.z = Math.PI/2 将圆柱体旋转90度，使其水平放置
- head.position.set(1.5, 0, 0) 将头部定位在身体右侧（Three.js坐标系：x右，y上，z屏幕外）
部件层级关系：
- 通过dog.add()将各个身体部件添加到组中
- 最终返回的dog对象包含所有子部件的完整层级结构

片段2：动画循环与尾巴摆动

function animate() {
    requestAnimationFrame(animate);
    
    // 摇尾巴动画
    dog.children[8].rotation.z = Math.sin(Date.now() * 0.005) * 0.5 - 0.5;
    
    controls.update();
    renderer.render(scene, camera);
}

重点解析：

动画循环机制：
- requestAnimationFrame 是浏览器提供的动画API，以约60fps的频率循环调用animate函数
- 每次循环都会重新渲染场景(renderer.render)
数学函数实现动画：
- Math.sin(Date.now() * 0.005) 通过正弦函数生成周期性数值
- *0.5 -0.5 将数值范围从[-1,1]映射到[-1,0]，实现尾巴摆动效果
- 随时间变化的参数 (Date.now()) 驱动动画持续进行
部件索引访问：
- dog.children[6] 访问之前添加到组中的第7个元素（尾巴）
- 通过修改rotation.z实现绕z轴旋转（Three.js使用右手坐标系）