Как добавить 3D-модель на сайт

Question

Как добавить 3D-модель на сайт

Рейтинг: 0Ответов: 1Опубликовано: 21.07.2025

Есть 3d модель в формате glb, нужно разместить её на сайте, чтобы можно было покрутить-повертеть, поменять расцветку отдельных частей.

Я начинающий программист на React. Пробовал sketchfab, но не нашел, как там менять цвета у отдельных элементов. Знаю, что есть мощная библиотека three.js, но пока сложновато, думаю, для меня. Может есть какие-то попроще инструменты?

Заранее большое спасибо за помощь.

reactjs 3d three.js моделирование

Источник: Stack Overflow на русском

Answer 1

▲ 0

getObjectByName есть функция в TREE.js. Цвет указывается у материала меша

<!DOCTYPE html>
<html lang="en">

<head>
    <title>three.js webgl - geometry - cube</title>
    <meta charset="utf-8">
    <meta
        name="viewport"
        content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    >
</head>

<body>


    <button>red</button>

    <script type="module">
        import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.125.0/build/three.module.js';
        import { GLTFLoader } from "https://cdn.jsdelivr.net/npm/three@0.125.0/examples/jsm/loaders/GLTFLoader.js";
        import { DRACOLoader } from "https://cdn.jsdelivr.net/npm/three@0.125.0/examples/jsm/loaders/DRACOLoader.js";
        let camera, scene, renderer;
        let mesh;

        init();

        function init() {

            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100);
            camera.position.z = 5;

            scene = new THREE.Scene();

            const loader = new GLTFLoader();
            const dracoLoader = new DRACOLoader();
            dracoLoader.setDecoderPath( 'https://site3d.site/site3d/modules/importModelCompress/draco/')

            loader.setDRACOLoader(dracoLoader);


            loader.load(
                'https://configurator.site3d.site/backend/data/6963/models/e0d1bb95188356a5eded56025f92919a.glb',

                function (gltf) {
                    gltf.scene.name = 'glb'
                    scene.add(gltf.scene);
                },
            )

            const dLight1 = new THREE.DirectionalLight(0xffffff, 25);
            dLight1.position.set(20, -20, 30);
            scene.add(dLight1);


            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setAnimationLoop(animate);
            renderer.setClearColor(0xffffff, 1);
            document.body.appendChild(renderer.domElement);
            window.addEventListener('resize', onWindowResize);
        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        }



        function animate() {
            renderer.render(scene, camera);
        }

        function setred() {
            const glb = scene.getObjectByName('glb')
            if (glb) {
                const cab = glb.getObjectByName('Cabin')
                cab.material.color = new THREE.Color(0xff0000)
            }
            renderer.render(scene, camera);
        }


        window.setred = setred

    </script>


</body>

</html>

Как добавить 3D-модель на сайт

Ответы