6.threejs的片模型材质贴图之世界的镜头小案例

[复制链接]
查看: 508   回复: 0     threejs基础教程

297

主题

297

帖子

1642

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1642
2024-6-24 13:57:19   显示全部楼层   阅读模式  
封面 2_00048.jpg

教程链接






美术物料.zip免费

2024-6-28 13:21上传, 157.13 KB, 下载次数: 2

下载





完结代码


<html lang="en">

<head>
    <meta charset="utf-8">
    <title>世界的尽头</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="module">
        import * as THREE from './three.module.js';
        import { OrbitControls } from './OrbitControls.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);
        document.body.appendChild(renderer.domElement);
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.target= new THREE.Vector3( 0, 2, 0 );
        // window.addEventListener('mousemove', () => {
        //     console.log(camera.position);
        // })

        const word = {
            addBox: null,
            envTextrue: null,
            boxY: null,
            boxG: new THREE.Group(),
            boxAll: [],
            addPlan: null,
            people: null
        }
        word.envTextrue = new THREE.TextureLoader().load("./tiakong1.jpg");
        word.envTextrue.mapping = THREE.EquirectangularRefractionMapping
        scene.environment = word.envTextrue
        scene.background = word.envTextrue

        word.addBox = () => {
            const geometry = new THREE.BoxGeometry(1.4, 0.4, 2);
            const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
            const cube = new THREE.Mesh(geometry, material);
            return cube
        }

        word.addPlan = () => {
            const geometry = new THREE.PlaneGeometry(1, 2.4);
            const material = new THREE.MeshBasicMaterial({
                color: 0xffffff, side: 0,
                map: new THREE.TextureLoader().load("./人物.png"), transparent: true
            });
            const plane = new THREE.Mesh(geometry, material);
            return plane
        }

        word.people = word.addPlan()
        word.people.material.map.colorSpace = THREE.SRGBColorSpace
        let size = 1.6
        word.people.scale.set(size, size, size)
        word.people.position.set(-.65, 1.74, 0)
        scene.add(word.people)

        word.boxY = word.addBox()
        word.boxY.visible = false

        for (let i = 0; i < 10; i++) {
            word.boxAll[i] = word.boxY.clone()
            word.boxAll[i].position.set(i * 1.4, i * 0.4, 0)
            word.boxAll[i].visible = true
            word.boxG.add(word.boxAll[i])
            word.boxG.position.x -= 1.4 / 2
            word.boxG.position.y -= 0.4 / 2
        }

        word.boxG.add(word.boxY)

        scene.add(word.boxG);



        camera.position.set(-2.03833560884352,0.9562617465043892,7.607172055080853)

        function animate() {
            requestAnimationFrame(animate);
            // cube.rotation.x += 0.01;
            // cube.rotation.y += 0.01;
            renderer.render(scene, camera);
            controls.update();
        }
        animate();
    </script>
</body>

</html>

首先我们下载起始环境场景代码



执行过之前项目又依赖的也可以直接复制核心起始代码




起始代码效果是一个楼梯

1.jpg

设计这个案例的时候我想到楚门的世界,当他明白世界的真相,并执着追到世界镜头的世界名画~~

1.png

从无聊的生活走向现实

本期我们要用到的技术栈

平面缓冲几何体(PlaneGeometry)
const geometry = new THREE.PlaneGeometry( 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
scene.add( plane );
以及texture
// load a texture, set wrap mode to repeat
const texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );
然后赋予到关于 最省资源的基础网格材质(MeshBasicMaterial)材质的探讨






threejs美术大师课程
回复

使用道具 举报

您需要登录后才可以回帖   登录 立即注册

高级模式

南通谢凡软件科技有限公司