INFO

模型加载资源实在 github 上存放的, 所以加载时间是比较慢的...

汽车 🚗

颜色

汽车模型

关于Model组组件在这里

<script setup lang="ts">
import { ref, shallowRef, reactive } from "vue";
import * as THREE from "three";
import { TresCanvas } from "@tresjs/core";
import {
	CameraControls,
	vLightHelper,
	TransformControls,
} from "@tresjs/cientos";
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from "three";
import model from "./model.vue";
defineOptions({
	dir_name: "models",
});

const gl = {
	// 画布颜色
	clearColor: "#82DBC5",
	// 是否启用阴影
	shadows: true,
	// 控制默认清除 alpha 值
	alpha: true,
	// 设置阴影映射类型
	shadowMapType: BasicShadowMap,
	// 定义输出编码
	outputColorSpace: SRGBColorSpace,
	// 定义渲染器使用的色调映射曝光。
	toneMapping: NoToneMapping,
	// 用户代理适合此WebGL上下文的GPU配置。
	powerPreference: "high-performance",
};

const boxRef = shallowRef();
const controlsState = reactive({
	minDistance: 0,
	maxDistance: 100,
});
const colors = ["blue", "white", "red", "green", "yellow"];
const lightRef = ref();

const onChangeColor = (colorKey: string) => {
	lightRef.value.color = new THREE.Color(colorKey);
};
</script>

<template>
	<div class="container">
		<div class="handler">
			<div class="handler-row">
				<div>颜色</div>
				<div>
					<span
						class="colors-item"
						v-for="item in colors"
						:key="item"
						:style="{ background: item }"
						@click="onChangeColor(item)"
					></span>
				</div>
			</div>
		</div>

		<TresCanvas v-bind="gl">
			<TresPerspectiveCamera :position="[0, 0, 4]" />
			<CameraControls v-bind="controlsState" make-default />

			<TransformControls :object="lightRef" />

			<TresDirectionalLight
				ref="lightRef"
				:position="[0, 1, -1]"
				:intensity="3"
				v-light-helper
			>
				<TresMesh ref="boxRef" :position="[0, -2, -1]">
					<Suspense>
						<model />
					</Suspense>
				</TresMesh>

				<TresGridHelper :position="[0, -2, 0]" />
			</TresDirectionalLight>
		</TresCanvas>
	</div>
</template>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: #fff;

	.handler {
		position: absolute;
		right: 6px;
		top: 6px;
		z-index: 100;
		background: #fff;
		padding: 14px;
		border-radius: 4px;

		&-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 20px;
			color: #000;

			.colors-item {
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 2px;
				margin-left: 3px;
				cursor: pointer;
				border: 1px solid #eee;
			}
		}
	}
}
</style>

动漫

动漫模型

关于Model组组件在这里

<script setup lang="ts">
import { ref, reactive } from "vue";
import { TresCanvas } from "@tresjs/core";
import {
	CameraControls,
	vLightHelper,
	TransformControls,
} from "@tresjs/cientos";
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from "three";
import model from "./model.vue";

const gl = {
	// 画布颜色
	clearColor: "#82DBC5",
	// 是否启用阴影
	shadows: true,
	// 控制默认清除 alpha 值
	alpha: true,
	// 设置阴影映射类型
	shadowMapType: BasicShadowMap,
	// 定义输出编码
	outputColorSpace: SRGBColorSpace,
	// 定义渲染器使用的色调映射曝光。
	toneMapping: NoToneMapping,
	// 用户代理适合此WebGL上下文的GPU配置。
	powerPreference: "high-performance",
};

const controlsState = reactive({
	minDistance: 0,
	maxDistance: 100,
});

const lightRef = ref();
</script>

<template>
	<div class="container">
		<TresCanvas v-bind="gl">
			<TresPerspectiveCamera :position="[0, 0, 3]" :fov="75" />
			<CameraControls v-bind="controlsState" make-default />

			<TransformControls :object="lightRef" />

			<TresDirectionalLight
				ref="lightRef"
				:position="[0, 1, 2]"
				:intensity="3"
				v-light-helper
			>
				<TresMesh :position="[0, -2, -1]">
					<Suspense>
						<model />
					</Suspense>
				</TresMesh>

				<TresGridHelper :position="[0, -2, 0]" />
			</TresDirectionalLight>
		</TresCanvas>
	</div>
</template>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: #fff;

	.handler {
		position: absolute;
		right: 6px;
		top: 6px;
		z-index: 100;
		background: #fff;
		padding: 14px;
		border-radius: 4px;

		&-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 20px;
			color: #000;

			.colors-item {
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 2px;
				margin-left: 3px;
				cursor: pointer;
				border: 1px solid #eee;
			}
		}
	}
}
</style>

模型动画

猴子模型

关于Model组组件在这里

<script setup lang="ts">
import { ref, reactive } from "vue";
import { TresCanvas } from "@tresjs/core";
import {
	CameraControls,
	vLightHelper,
	TransformControls,
} from "@tresjs/cientos";
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from "three";
import model from "./model.vue";
//
const gl = {
	// 画布颜色
	clearColor: "#82DBC5",
	// 是否启用阴影
	shadows: true,
	// 控制默认清除 alpha 值
	alpha: true,
	// 设置阴影映射类型
	shadowMapType: BasicShadowMap,
	// 定义输出编码
	outputColorSpace: SRGBColorSpace,
	// 定义渲染器使用的色调映射曝光。
	toneMapping: NoToneMapping,
	// 用户代理适合此WebGL上下文的GPU配置。
	powerPreference: "high-performance",
};

const controlsState = reactive({
	minDistance: 0,
	maxDistance: 100,
});

const lightRef = ref();
</script>

<template>
	<div class="container">
		<TresCanvas v-bind="gl">
			<TresPerspectiveCamera :position="[0, 5, 8]" :fov="75" />
			<CameraControls v-bind="controlsState" make-default />

			<TransformControls :object="lightRef" />

			<TresDirectionalLight
				cast-shadow
				ref="lightRef"
				:position="[0, 1, 2]"
				:intensity="3"
				v-light-helper
			>
				<TresMesh
					:position="[0, -2, 0]"
					:rotate-y="(Math.PI / 180) * -90"
					cast-shadow
				>
					<Suspense>
						<model />
					</Suspense>
				</TresMesh>

				<TresGridHelper :position="[0, -2, 0]" />
			</TresDirectionalLight>
		</TresCanvas>
	</div>
</template>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: #fff;

	.handler {
		position: absolute;
		right: 6px;
		top: 6px;
		z-index: 100;
		background: #fff;
		padding: 14px;
		border-radius: 4px;

		&-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 20px;
			color: #000;

			.colors-item {
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 2px;
				margin-left: 3px;
				cursor: pointer;
				border: 1px solid #eee;
			}
		}
	}
}
</style>

热卖的手机

最新款手机-2024-Plus

介绍: 由xxx开发并发布的一款高性能,在科技与艺术的交响乐章中，智尊X1横空出世，重新定义了智能手机的边界。这不仅仅是一部手机，它是您探索世界、连接未来的钥匙。

xxx不仅是科技的结晶，更是您品味与身份的象征。它不仅仅是通讯工具，而是您探索未知、记录美好、高效生活的伙伴。现在，就让我们一起，开启这场前所未有的智能之旅吧！

手机模型

关于Model组组件在这里

<script setup lang="ts">
import { ref } from "vue";
import { TresCanvas } from "@tresjs/core";
import { OrbitControls } from "@tresjs/cientos";
import { BasicShadowMap, NoToneMapping, SRGBColorSpace, Color } from "three";
import model from "./model.vue";

const gl = {
	shadows: true,
	alpha: true,
	powerPreference: "high-performance",
	shadowMapType: BasicShadowMap,
	outputColorSpace: SRGBColorSpace,
	toneMapping: NoToneMapping,
};

const colors = ["white", "red", "blue", "pink", "green"];

const lightRef = ref();

const onChangeControls = (e: any) => {
	const { x, y, z } = e.object.position;
	lightRef.value.position.set(x, y, z);
};

const onChangeColor = (color: string) => {
	lightRef.value.color = new Color(color);
};
</script>

<template>
	<div class="container">
		<div class="container-left">
			<div class="color-box">
				<div
					class="color"
					v-for="item in colors"
					:key="item"
					:style="{ background: item }"
					@click="onChangeColor(item)"
				></div>
			</div>
			<TresCanvas v-bind="gl">
				<OrbitControls enableDamping makeDefault @change="onChangeControls" />

				<TresPerspectiveCamera :position="[0.3, 0.7, 5]" />

				<TresMesh :position="[-0.5, -1, 0]">
					<Suspense>
						<model />
					</Suspense>
					<!-- <TresGridHelper :position="[0, 0, 0]" /> -->

					<TresDirectionalLight
						ref="lightRef"
						:position="[2, 1, 0]"
						:intensity="3"
					></TresDirectionalLight>
				</TresMesh>
			</TresCanvas>
		</div>
		<div class="container-right">
			<div class="right-content">
				<h2>最新款手机-2024-Plus</h2>
				<p class="mt-10">
					介绍:
					由xxx开发并发布的一款高性能,在科技与艺术的交响乐章中，智尊X1横空出世，重新定义了智能手机的边界。这不仅仅是一部手机，它是您探索世界、连接未来的钥匙。
				</p>
				<p class="mt-10">
					xxx不仅是科技的结晶，更是您品味与身份的象征。它不仅仅是通讯工具，而是您探索未知、记录美好、高效生活的伙伴。现在，就让我们一起，开启这场前所未有的智能之旅吧！
				</p>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.mt-10 {
	margin-top: 10px;
}
.container {
	width: 100%;
	height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: #333;
	background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
	&-left {
		flex: 1;
		height: 100%;
		position: relative;

		.color-box {
			position: absolute;
			bottom: 40px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			z-index: 100;
			.color {
				width: 30px;
				height: 30px;
				border: 1px solid #eee;
				cursor: pointer;
				&:not(:last-of-type) {
					margin-right: 10px;
				}
			}
		}
	}
	&-right {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.right-content {
			padding: 20px;
			line-height: 1.5;
		}
	}
}
</style>

热卖的耳机

耳机模型

关于Model组组件在这里

<script setup lang="ts">
import { ref } from "vue";
import { TresCanvas } from "@tresjs/core";
import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from "three";
import model from "./model.vue";
const gl = {
	shadows: true,
	alpha: true,
	powerPreference: "high-performance",
	shadowMapType: BasicShadowMap,
	outputColorSpace: SRGBColorSpace,
	toneMapping: NoToneMapping,
};

const lightRef = ref();
const containerRef = ref();
</script>

<template>
	<div class="container" ref="containerRef">
		<div class="can">
			<TresCanvas v-bind="gl">
				<TresPerspectiveCamera :position="[0, 0, 10]" />

				<TresMesh :position="[-0.5, -1, 0]" :scale="[0.4, 0.4, 0.4]">
					<Suspense>
						<model />
					</Suspense>
				</TresMesh>

				<TresGridHelper :position="[-0.5, -1, 0]" />
				<TresDirectionalLight
					ref="lightRef"
					:position="[2, 1, 0]"
					:intensity="3"
				></TresDirectionalLight>
			</TresCanvas>
		</div>
	</div>
</template>

<style scoped lang="scss">
.mt-10 {
	margin-top: 10px;
}
.container {
	width: 100%;
	height: 500px;
	position: relative;
	color: #333;
	background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);

	.can {
		position: absolute !important;
		inset: 0;
		width: 100%;
		height: 100%;
	}
}
</style>