threejs 加载材质

package.json

{
  "name": "threejs-texture",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "three": "0.110.0"
  },
  "devDependencies": {
    "html-webpack-plugin": "4.5.0",
    "ts-loader": "6.2.2",
    "typescript": "4.3.5",
    "webpack": "4.42.1",
    "webpack-cli": "3.3.12",
    "webpack-dev-server": "3.11.2"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "noEmit": true,
        "module": "esnext",
        "target": "es6",
        "lib": ["ES2019","dom"],
        "sourceMap": true,
        "moduleResolution": "node",
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "skipLibCheck": true,
        "suppressImplicitAnyIndexErrors": true,
        "experimentalDecorators": true,
        "noUnusedLocals": true,
        "downlevelIteration": true,
        "strict": true,
        "strictPropertyInitialization": false,
        "allowSyntheticDefaultImports": true,
        "skipDefaultLibCheck": true
    },
    "exclude": [
        "node_modules",
    ]
}

webpackage.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');

module.exports = {
    devtool: 'source-map',
    plugins: [
        new HtmlWebpackPlugin({
            template: resolve('./index.html')
        })
    ],
    resolve: {
        extensions: ['.ts', '.js']
    },
    module:{
            rules:[
                {
                    test: /\.ts$/,
                    exclude: /node_modules/,
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true,
                        experimentalWatchApi: true,
                    }
                },
            ],
        },
    devServer: {
        compress: true,
        stats: {
            assets: false,
            builtAt: true,
            modules: false,
            entrypoints: false,
            contentBase: resolve(__dirname, './'),
            /**
             * ts-node transpileOnly: true
             * if you enable this option, webpack 4 will give you "export not found" warnings any time you re-export a type:
             * The reason this happens is that when typescript doesn't do a full type check, 
             * it does not have enough information to determine whether an imported name is a type or not, 
             * so when the name is then exported, typescript has no choice but to emit the export. 
             * Fortunately, the extraneous export should not be harmful, so you can just suppress these warnings:
             */
            // warningsFilter: /export .* was not found in/
        },
    },
};

index.ts

import * as THREE from 'three';
import { OrbitControls }  from 'three/examples/jsm/controls/OrbitControls';

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xeaeaea);

// 创建mesh
const geometry = new THREE.BufferGeometry();
// 创建顶点
const vertices = new Float32Array( [
    -2.0, -1.5,  0,
    2.0, -1.5,  0,
    2.0,  1.5,  0,

    2.0,  1.5,  0,
   -2.0,  1.5,  0,
   -2.0, -1.5,  0
] );
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3) );

// 创建材质贴图
const uvs = new Float32Array( [
    0, 0,
    1, 0,
    1, 1,
    1, 1,
    0, 1,
    0, 0
] );
geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2) );

const loader = new THREE.TextureLoader();
const texture = loader.load('./t.png');

const material = new THREE.MeshBasicMaterial( { map: texture, transparent: true } );
console.log(material.side);
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);


// 添加控制器
new OrbitControls(camera, document.body);

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

t.png