4 models have responded to the "Voxel Art Pagoda Garden" challenge. Compare their approaches side-by-side on RIVAL. This response is part of RIVAL's open dataset of 5,600+ AI model responses.
Voxel Art Pagoda Garden
Create a detailed voxel art scene of a pagoda in a beautiful garden using ThreeJS
Claude 3.7 Thinking Sonnet
August 1, 2025
Website
?Prompt
Design and create a very creative, elaborate, and detailed voxel art scene of a pagoda in a beautiful garden with trees, including some cherry blossoms. Make the scene impressive and varied and use colorful voxels. Output only a single-page self-contained page, you can use ThreeJS.
Response
Couldn't render this response
This model didn't return a displayable web page for this challenge.
View raw output
# Voxel Pagoda Garden Scene
Here's an interactive 3D voxel art scene featuring a pagoda in a Japanese garden with cherry blossoms:
```html
<!DOCTYPE html>
<html>
<head>
<title>Voxel Pagoda Garden</title>
<style>
body { margin: 0; overflow: hidden; background-color: #000; }
canvas { display: block; }
#info {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
color: white;
font-family: Arial, sans-serif;
padding: 5px;
background-color: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="info">Click and drag to rotate | Scroll to zoom | Press SPACE to toggle day/night</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.150.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.150.0/examples/js/controls/OrbitControls.js"></script>
<script>
// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB);
let isNight = false;
// Camera setup
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(40, 30, 40);
// Renderer setup
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
// Controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.minDistance = 20;
controls.maxDistance = 100;
// Lights
const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.6);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.8);
directionalLight.position.set(50, 100, 50);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
scene.add(directionalLight);
// Helper function to create a voxel
function createVoxel(x, y, z, color, opacity = 1) {
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshLambertMaterial({ color: color, transparent: opacity < 1, opacity: opacity });
const voxel = new THREE.Mesh(geometry, material);
voxel.position.set(x, y, z);
voxel.castShadow = true;
voxel.receiveShadow = true;
scene.add(voxel);
return voxel;
}
// Create ground/base
for (let x = -35; x <= 35; x++) {
for (let z = -35; z <= 35; z++) {
// Grass with some variation
const distFromCenter = Math.sqrt(x*x + z*z);
if (distFromCenter <= 35) {
const greenVariation = Math.random() * 0.1;
const green = new THREE.Color(0.2 + greenVariation, 0.6 + greenVariation, 0.2);
createVoxel(x, -0.5, z, green);
}
}
}
// Create water
function createWater(centerX, centerZ, radius) {
for (let x = centerX - radius; x <= centerX + radius; x++) {
for (let z = centerZ - radius; z <= centerZ + radius; z++) {
const distFromCenter = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(z - centerZ, 2));
if (distFromCenter < radius) {
// Water ripple effect
const ripple = Math.sin(distFromCenter * 2) * 0.1;
const waterColor = new THREE.Color(0.2, 0.4 + ripple, 0.8 + ripple);
createVoxel(x, -0.3, z, waterColor, 0.8);
}
}
}
}
// Create a small pond
createWater(-15, -10, 8);
// Create stone path
function createPath(startX, startZ, endX, endZ, width) {
const length = Math.max(Math.abs(endX - startX), Math.abs(endZ - startZ));
for (let i = 0; i <= length; i++) {
const t = i / length;
const x = Math.floor(startX + (endX - startX) * t);
const z = Math.floor(startZ + (endZ - startZ) * t);
for (let w = -width; w <= width; w++) {
if (Math.abs(endX - startX) > Math.abs(endZ - startZ)) {
// Horizontal path
const stoneColor = 0x808080 + Math.floor(Math.random() * 0x0F0F0F);
createVoxel(x, -0.4, z + w, stoneColor);
} else {
// Vertical path
const stoneColor = 0x808080 + Math.floor(Math.random() * 0x0F0F0F);
createVoxel(x + w, -0.4, z, stoneColor);
}
}
}
}
// Create paths
createPath(-30, 0, 0, 0, 1); // Main path to pagoda
createPath(-15, -20, -15, 0, 1); // Path to pond
createPath(-15, 0, -15, 15, 1); // Path to cherry blossoms
// Function to create a cherry blossom tree
function createCherryBlossomTree(baseX, baseY, baseZ, size = 1) {
// Trunk
const trunkHeight = 3 + Math.floor(Math.random() * 3);
for (let y = 0; y < trunkHeight; y++) {
createVoxel(baseX, baseY + y, baseZ, 0x8B4513);
if (size > 1 && y < 2) {
createVoxel(baseX + 1, baseY + y, baseZ, 0x8B4513);
createVoxel(baseX, baseY + y, baseZ + 1, 0x8B4513);
createVoxel(baseX - 1, baseY + y, baseZ, 0x8B4513);
createVoxel(baseX, baseY + y, baseZ - 1, 0x8B4513);
}
}
// Blossom foliage
const foliageRadius = 2 + size;
for (let x = -foliageRadius; x <= foliageRadius; x++) {
for (let y = 0; y <= foliageRadius + 1; y++) {
for (let z = -foliageRadius; z <= foliageRadius; z++) {
const distance = Math.sqrt(x*x + y*y + z*z);
if (distance <= foliageRadius && Math.random() > 0.3) {
// Different shades of pink for cherry blossoms
const rand = Math.random();
let color;
if (rand < 0.6) {
color = 0xFFB7C5; // Light pink
} else if (rand < 0.9) {
color = 0xFFC0CB; // Pink
} else {
color = 0xFFFAFA; // White
}
createVoxel(baseX + x, baseY + trunkHeight - 1 + y, baseZ + z, color);
}
}
}
}
}
// Function to create a regular tree
function createTree(baseX, baseY, baseZ, type = 'normal', size = 1) {
// Trunk
const trunkHeight = 3 + Math.floor(Math.random() * 3);
for (let y = 0; y < trunkHeight; y++) {
createVoxel(baseX, baseY + y, baseZ, 0x8B4513);
if (size > 1 && y < 2) {
createVoxel(baseX + 1, baseY + y, baseZ, 0x8B4513);
createVoxel(baseX - 1, baseY + y, baseZ, 0x8B4513);
}
}
// Foliage
const foliageRadius = (type === 'large') ? 4 * size : 2 * size;
let foliageColor;
switch(type) {
case 'maple':
foliageColor = 0xFF4500;
break;
case 'pine':
foliageColor = 0x228B22;
break;
case 'bamboo':
foliageColor = 0x90EE90;
break;
default:
foliageColor = 0x228B22;
}
if (type === 'pine') {
// Conical shape for pine trees
for (let y = 0; y <= foliageRadius * 2; y++) {
const levelRadius = foliageRadius - (y / 2);
if (levelRadius > 0) {
for (let x = -levelRadius; x <= levelRadius; x++) {
for (let z = -levelRadius; z <= levelRadius; z++) {
const distance = Math.sqrt(x*x + z*z);
if (distance <= levelRadius && Math.random() > 0.3) {
createVoxel(baseX + x, baseY + trunkHeight + y, baseZ + z, foliageColor);
}
}
}
}
}
} else if (type === 'bamboo') {
// Bamboo style
for (let y = 0; y < 10; y++) {
createVoxel(baseX, baseY + trunkHeight + y, baseZ, 0x90EE90);
if (y > 3 && y % 2 === 0) {
for (let x = -1; x <= 1; x++) {
for (let z = -1; z <= 1; z++) {
if ((x !== 0 || z !== 0) && Math.random() > 0.5) {
createVoxel(baseX + x, baseY + trunkHeight + y, baseZ + z, 0x90EE90);
}
}
}
}
}
} else {
// Round foliage for normal and maple trees
for (let x = -foliageRadius; x <= foliageRadius; x++) {
for (let y = 0; y <= foliageRadius; y++) {
for (let z = -foliageRadius; z <= foliageRadius; z++) {
const distance = Math.sqrt(x*x + y*y + z*z);
if (distance <= foliageRadius && Math.random() > 0.3) {
// Add some variation to the color
const colorVariation = Math.random() * 0.1;
const finalColor = new THREE.Color(foliageColor).offsetHSL(0, 0, colorVariation);
createVoxel(baseX + x, baseY + trunkHeight + y, baseZ + z, finalColor);
}
}
}
}
}
}
// Create pagoda
function createPagoda(baseX, baseY, baseZ) {
const pagodaWidth = 9;
const levels = 5;
const baseColors = [0x8B0000, 0xA52A2A, 0x8B4513, 0xCD5C5C, 0xB22222];
const roofColor = 0xCD5C5C;
// Base platform
for (let x = -pagodaWidth - 2; x <= pagodaWidth + 2; x++) {
for (let z = -pagodaWidth - 2; z <= pagodaWidth + 2; z++) {
createVoxel(baseX + x, baseY - 1, baseZ + z, 0x696969);
}
}
for (let level = 0; level < levels; level++) {
const currentWidth = pagodaWidth - (level * 2);
const currentY = baseY + level * 5;
const color = baseColors[level % baseColors.length];
// Floor
for (let x = -currentWidth; x <= currentWidth; x++) {
for (let z = -currentWidth; z <= currentWidth; z++) {
createVoxel(baseX + x, currentY, baseZ + z, color);
}
}
// Walls
if (level < levels - 1) {
for (let x = -currentWidth; x <= currentWidth; x++) {
for (let y = 1; y <= 3; y++) {
// Create openings in the walls
if ((x !== 0 && x !== -1 && x !== 1) || y === 3) {
createVoxel(baseX + x, currentY + y, baseZ + currentWidth, color);
createVoxel(baseX + x, currentY + y, baseZ - currentWidth, color);
}
}
}
for (let z = -currentWidth; z <= currentWidth; z++) {
for (let y = 1; y <= 3; y++) {
// Create openings in the walls
if ((z !== 0 && z !== -1 && z !== 1) || y === 3) {
createVoxel(baseX + currentWidth, currentY + y, baseZ + z, color);
createVoxel(baseX - currentWidth, currentY + y, baseZ + z, color);
}
}
}
}
// Roof - more elaborate
const roofWidth = currentWidth + 2;
for (let x = -roofWidth - 1; x <= roofWidth + 1; x++) {
for (let z = -roofWidth - 1; z <= roofWidth + 1; z++) {
createVoxel(baseX + x, currentY + 4, baseZ + z, roofColor);
}
}
// Roof corners curving upward
createVoxel(baseX + roofWidth + 1, currentY + 5, baseZ + roofWidth + 1, roofColor);
createVoxel(baseX + roofWidth + 1, currentY + 5, baseZ - roofWidth - 1, roofColor);
createVoxel(baseX - roofWidth - 1, currentY + 5, baseZ + roofWidth + 1, roofColor);
createVoxel(baseX - roofWidth - 1, currentY + 5, baseZ - roofWidth - 1, roofColor);
// Roof decorationVoxel Art Pagoda Garden
About Claude 3.7 Thinking Sonnet
Capabilities
ConversationReasoningAnalysisSummarization
Categories
TextVisionMultimodal
Specifications
- Provider
- Anthropic
- Released
- 2025-02-26
- Size
- LARGE
- Parameters
- Not disclosed
- Context
- 200,000 tokens
